如何在jQuery / jS中使用if语句更改变量值

Question

Hello I am having some trouble with my program. I've set some variables in the beginning of my program but Id like to change them with an if statement. Right now the first if statement gives me the results i want, but the second else if statement isnt working and the variables take the default values of '0'

here is the start of my jQuery code:

    jQuery(".repair-grid-item1").click(function(){
         jQuery(".repair-grid-item1 i").toggle();
         jQuery(".repair-grid-item1").toggleClass("grid-active");
         jQuery('.repair-grid-item1').gg();
    });

   (function( $ ){
   $.fn.gg = function() {
      var price = 0;

      var one = 0;
      var two = 0;
      var three = 0;
      var four = 0;
      var five = 0;
      var six = 0;

      // *** this code block is working, returning correct values ***
      if (jQuery(".repair-grid-item").hasClass("iPhone5")) {
        var one = 85;
        var two = 70;
        var three = 75;
        var four = 65;
        var five = 75;
        var six = 80;
      }


      // *** this code block isnt working, returning default values of 0 ***
      else if (jQuery(".repair-grid-item").hasClass("iPhone5c")) {
        var one = 85;
        var two = 70;
        var three = 75;
        var four = 65;
        var five = 75;
        var six = 80;
      }

      //one only
      if (jQuery(".repair-grid-item1").hasClass("grid-active") &&
          !jQuery(".repair-grid-item2").hasClass("grid-active") &&
          !jQuery(".repair-grid-item3").hasClass("grid-active") &&
          !jQuery(".repair-grid-item4").hasClass("grid-active") &&
          !jQuery(".repair-grid-item5").hasClass("grid-active") &&
          !jQuery(".repair-grid-item6").hasClass("grid-active"))
      {
          price = one;
          document.getElementById("total-price").innerHTML = price;
          localStorage.setItem("sum", price);
      }
   };
})( jQuery );

here is a small snippet of my html code (this is the iPhone5 page)

          <div class="repair-grid-item repair-grid-item1 iphone5">
            <h3>Screen Repair</h3>
            <i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i>
          </div>

iphone5c page:

          <div class="repair-grid-item repair-grid-item1 iphone5c">
            <h3>Screen Repair</h3>
            <i class="fa fa-check-circle-o fa-2x" aria-hidden="true"></i>
          </div>

thanks!

Answer 1

Variables in Javascript are function scoped. You don't have to declare them again using var inside your if , else-if blocks.

Edit: As others have pointed out, the problem is with the case of the css class iphone5c . You are checking for iPhone5c .

Answer 2

The problem is that you are checking for the class iPhone5c instead of the class iphone5c , note the capital P. JQuery is case sensitive, so you should writte them in with the same caps.

So your your code is storing 0 on the variables because it doesn't pass the if else condition.

Furthermore, as other answers say, due to the scope, variables don't need to be redeclared using var inside the if . You should remove that.

Answer 3

I'm sorry guys i made a silly error, @nnnnnn pointed me in the right direction. i was not consistent in my cases, 'iPhone5c' uppercase P was in my jQuery code while 'iphone5c' lowercase p was in my html. I corrected the cases and it works fine now. Also you guys were also correct, I didnt need to have 'var' infront of each veriable in the if and else if cases. Thanks for helping! and thanks @nnnnnn for finding the solution :)