선택 변경 함수에서 jQuery로 처리하는 옵션 변수

Question

선택 항목의 옵션을 선택한 경우 일부 변수 값을 변경하기 위해 일부 jQuery 함수를 작성했습니다 (옵션을 선택하면 특정 값 추가, 옵션이 선택되지 않으면 해당 값 빼기). 더 이상), 그러나 매우 이상한 방법으로 값을 더하거나 뺍니다. 여기에 내가 (체크 박스와 함께 작동하는 데 사용되는 앞의 코드에서 발췌) 자바 스크립트에 대한 쓴 코드입니다 :

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

는 여기에이 기능이 처리 변수가 얼마나

이

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

이

누군가가 나를 설명 할 수 html로에게의 ? 이상한 동작 예 : 옵션 5를 클릭하면 pds1에 10이 추가되지 않고 대신 pds2에 10이 뺍니다. 대신에 일어날 일은 pds1에 10을 더하고 pds2에는 아무 것도하지 않는 것입니다. 나는이 문제가 "옵션 6 : 선택"아래의 "다른 경우"라고 생각하지만, 왜 그런가? 그리고 유일한 이상한 행동은 아닙니다.

Answer 1

왜 결과가 나타나는 지 쉽게 알 수 있습니다. 현재 코드와 # 5 예를 사용하면 각각 if 문을 살펴볼 수 있습니다. # 5가 선택되기 때문에 pds1은 10을 더합니다. # 6이 선택되지 않고 pds1이 # 5만큼 증가하면 else은 방금 pds1에 추가 된 것을 뺍니다.

매번 변수를 0으로 재설정하고 필요한 것을 추가하기 만하면이 전체 논리를 단순화 할 수 있습니다.

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