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

时间:2016-07-05 06:07:24

标签: javascript jquery html variables if-statement

您好我的程序遇到了一些问题。我在程序的开头设置了一些变量,但我想用if语句更改它们。现在第一个if语句给了我想要的结果,但第二个if语句不起作用,变量采用默认值'0'

这是我的jQuery代码的开头:

    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 );

这是我的html代码的一小段(这是iPhone5页面)

          <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页面:

          <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>

谢谢!

3 个答案:

答案 0 :(得分:1)

Javascript中的变量是函数作用域。您不必使用varif块内的else-if再次声明它们。

编辑:正如其他人所指出的那样,问题在于css类iphone5c的情况。您正在检查iPhone5c

答案 1 :(得分:0)

问题在于您正在检查类iPhone5c而不是类iphone5c,请注意大写P. JQuery区分大小写,因此您应该使用相同的大写字母将它们写入。< / p>

因此,您的代码在变量上存储0,因为它没有通过if else条件。

此外,正如其他答案所说,由于范围,变量不需要使用var内的if重新声明。你应该删除它。

答案 2 :(得分:0)

对不起,我犯了一个愚蠢的错误,@ nnnnnn指出了我正确的方向。在我的情况下我并不一致,'iPhone5c'大写P在我的jQuery代码中,而'iphone5c'小写p在我的html中。我纠正了这些案件,现在工作正常。你们这些人也是正确的,我不需要在if和else if情况下使用每个可验证的'var'。谢谢你的帮助!并感谢@nnnnnn寻找解决方案:)