选项变量选择更改功能使用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：选中”下的“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); 

    }); 
}); 

DEMO：http://jsfiddle.net/f9UEC/