在选择更改函数中使用 jQuery 处理选项变量

Question

我尝试编写一些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 不执行任何操作。我认为问题，在这种情况下，它出在"选项#6：selected"下的"else if"中，但为什么呢？这不是唯一的奇怪行为。

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