Change class according to condition

Asked

Viewed 2,089 times

0

I’d like to do two things:

  • One that the label id cnt, when pressed the button more, add 1 more and when pressed the button less, subtract 1 less.
  • Other than that, when the label cnt equals zero, withdraws class pizzaselecionada.

Make the class change if the label=#cnt is equal to 0

<script>

   $(document).ready(function(e) {

        var Total = parseFloat('0');

        var P = $('.pizzadisponivel label').attr('value');

        var Pp = (P.replace(/,/,'.'));

        var cn = parseFloat('0');

    $('#mais').click(function(e) {
        $('li').hasClass('pizzadisponivel');
        $('li').removeClass('pizzadisponivel');
        $('li').addClass('pizzaselecionada');

        Total += parseFloat(Pp);
        $("#teste").html('R$' + parseFloat(Total).toFixed(2));
        alert(Total)

});

    $('#menos').click(function(e) {
        if ($('label #cnt').){ 
            $('li').hasClass('pizzaselecionada');
            $('li').removeClass('pizzaselecionada');
            $('li').addClass('pizzadisponivel');
        }

      else  {Total -= parseFloat(Pp);
            $("#teste").html('R$' + parseFloat(Total).toFixed(2));
            alert(Total);
        }
});

});


</script>
</head>

<body>
    <div>
        <li class="pizzadisponivel"><label value="29,90">29,90</label></li>
        <button id="mais">mais</button>
        <button id="menos">menos</button>
        <label id="cnt">0</label>
        <label id="teste">R$0,00</label>
    </div>
</body>
</html>
jquery

  • Friend, we know you want something(s) (s). Try to indicate in the title what you want. Don’t take this as a negative review... but that’s how it works Sopt.

  • All right, thank you very much, I’ll put it right in the title

1 answer

1

I believe this is what you want to do, remembering that in this scenario will only work for 1 pizza for more pizzas should totally change the schedule.

   $(document).ready(function(e) {
     var mais = $("#maois"),
       menos = $("#menos"),
       qtd = $("#qtd"),
       total = $("#total"),
       pizza = $('.pizzadisponivel'),
       valuePizza = $(".pizzadisponivel > label").attr('value').replace(/,/, '.');


     $('#mais').click(function(e) {
       var novaQtd = parseInt(qtd.text()) + 1;
       total.text("R$ " + (novaQtd * valuePizza).toFixed(2));
       pizza.addClass("pizzaselecionada");
       pizza.removeClass('pizzadisponivel');

       qtd.text(novaQtd);

     });

     $('#menos').click(function(e) {
       if (parseInt(qtd.text()) > 0) {         
         var novaQtd = parseInt(qtd.text()) - 1;
         qtd.text(novaQtd);
         total.text("R$ " + (novaQtd * valuePizza).toFixed(2))
         if(novaQtd == 0){
           pizza.removeClass("pizzaselecionada");
           pizza.addClass("pizzadisponivel");

           }
       }
     });

   });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div>
    <li class="pizzadisponivel">
      <label value="29,90">Calabresa 29,90</label>
    </li>
    <button id="mais">mais</button>
    <button id="menos">menos</button>
    <label id="qtd">0</label>
    <label id="total">R$0,00</label>
  </div>
</body>

</html>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.