0

我尝试编写一些 jQuery 函数来在选择选择项的选项时更改一些变量值（如果选择了选项，则添加某个值，如果不再选择选项，则减去该值），但它以非常奇怪的方式。这是我为 javascript 编写的代码（改编自以前用于复选框的代码）：

var pds1=0;
var pds2=0;
var pds3=0;
var pdstot=0;

$(document).ready(function() {
  $('#perk1').html(pds1);
  $('#perk2').html(pds2);
  $('#perk3').html(pds3);
  $('#perktot').html(pdstot);

  $("#blabla").change(
    function() {
      if ($("option#5:selected").length)
      {
        pds1=pds1+10;
        pdstot=pdstot+10;
      }
      else if(pds1>0)
      {
        pds1=pds1-10;
        pdstot=pdstot-10;
      }

      if ($("option#3:selected").length)
      {
        pds2=pds2+10;
        pdstot=pdstot+10;
      }
      else if(pds2>0)
      {
        pds2=pds2-10;
        pdstot=pdstot-10;
      }

      if ($("option#4:selected").length)
      {
        pds3=pds3+10;
        pdstot=pdstot+10;
      }
      else if(pds3>0)
      {
        pds3=pds3-10;
        pdstot=pdstot-10;
      }
      //option 6 adds 10 to variable pds1 and pds2
      if ($("option#6:selected").length)
      {
        pds1=pds1+10;
        pds2=pds2+10;
        pdstot=pdstot+10;
      }
      else if(pds1>0)
      {
        pds1=pds1-10;
        pds2=pds2-10;
        pdstot=pdstot+10;
      }

      $('#perk1').html(pds1);
      $('#perk2').html(pds2);
      $('#perk3').html(pds3);
      $('#perktot').html(pdstot);
    });
});

这是html

<select id='blabla' multiple='multiple'>
<option id='5'>Name5</option>
<option id='3'>Name3</option>
<option id='4'>Name4</option>
<option id='6'>Name6</option>
</select>

<span id="perk1"></span>
<span id="perk2"></span>
<span id="perk3"></span>
<span id="perk4"></span>

有人可以解释一下这个函数是如何处理变量的吗？奇怪的行为示例：单击选项 5 不会将 10 加到 pds1，而是将 10 减到 pds2；我想要发生的事情是将 10 添加到 pds1 而对 pds2 不执行任何操作。我认为问题在于，在这种情况下，它在“option#6:selected”下的“else if”中，但为什么呢？这不是唯一的奇怪行为。

4

1 回答 1

1

很容易看出为什么你会得到你得到的结果。使用当前代码和 #5 示例遍历每个if语句。由于选择了 #5，因此pds1添加了 10。由于没有选择 #6 并且 pds1 增加了 #5，因此else减去了刚刚添加到 pds1 的内容。

您可以通过每次简单地将变量重置为零来简化整个逻辑，然后只添加需要的内容。

/* utilty function to avoid repeated lines */
function showValues(pds1, pds2, pds3) {

    var pdstot = pds1 + pds2 + pds3
    $('#perk1').html(pds1);
    $('#perk2').html(pds2);
    $('#perk3').html(pds3);
    $('#perk4').html(pdstot);
}

$(document).ready(function() {
    showValues(0, 0, 0);

    $("#blabla").change(

    function() {
        var num_selected = $(this).find(':selected').length;

        var pds1 = 0;
        var pds2 = 0;
        var pds3 = 0;                     

        if ($("option#5:selected").length) {
            pds1 = pds1 + 10;
        }    
        if ($("option#3:selected").length) {
            pds2 = pds2 + 10;
        }    

        if ($("option#4:selected").length) {
            pds3 = pds3 + 10;
        }

        //option 6 adds 10 to variable pds1 and pds2
        if ($("option#6:selected").length) {
            pds1 = pds1 + 10;
            pds2 = pds2 + 10;    
        }

        showValues(pds1, pds2, pds3);

    });
});

演示：http: //jsfiddle.net/f9UEC/

于 2012-10-07T23:00:01.340 回答