選項變量選擇更改功能使用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/