선택 옵션과 함께 자바 스크립트를 사용하여 계산 하시겠습니까?

Question

누군가 제발 JavaScript 코딩을 도와주세요. 여러 웹 사이트에서 asp.net을 사용하여 웹 사이트를 구축하고 있습니다. 선택한 옵션에 따라 입력 상자의 값이 결정됩니다.이 링크를 참조하십시오. http://codepen.io/anon/pen/evAuc

다음과 같이 약 67 개의 드롭 다운이 있습니다. 비효율적 인 코드로 작성하는 것은 악몽입니다.

이 두 가지 코드에 대한보다 효율적인 코드를 작성하고 나머지는 나 혼자서 할 수 있도록 도와주세요.

건배.

Answer 1

코드를 부분적으로 나눠서 (jquery를 사용했습니다.) 코드를 더 명확하게 만들기 위해 함수 이름과 calculateValue 구현을 변경해야하지만

$(document).ready(function(){ 
    initCalculation($('#keyTechTextBox'),$("#dropdown_serverVirtualisation"),$("#dropdown_desktopVirtualisation")); 
    //more can be added here 
}); 

function initCalculation(inputField,select1,select2){ 
    select1.change(function(){ //this can be done more generic 
     inputField.val(calculateValue(select1.val(),select2.val()).toFixed(0)+"%"); 
    }); 
    select2.change(function(){ 
     inputField.val(calculateValue(select1.val(),select2.val()).toFixed(0)+"%"); 
    }); 
} 

function calculateValue(firstOpt,secondOpt){ //more abstract function name please :D 
    //you should really optimize this.. - i did some 
    var sV_Value = 10; 
    var sV1 =0; 
    var sV2 = sV_Value; 
    var dV1 =0; 
    var dV2 = dV_Value; 
    if (firstOpt === "G") { 
     sV1 = sV_Value; 
    } 
    if (firstOpt === "O") { 
     sV1 = sV_Value * 0.5; 
    } 
    if (firstOpt === "A") { 
     sV1 = sV_Value * 0.3; 
    } 
    if (firstOpt === "R") { 
     sV1 = 0; 
    } else if (firstOpt === "U") { 
     sV1 = 0; 
    } 
    if (secondOpt === "N") { 
     dV2 = 0; 
    } 
    if (secondOpt === "G") { 
     dV1 = dV_Value; 
    } 
    if (secondOpt === "O") { 
     dV1 = dV_Value * 0.5; 
    } 
    if (secondOpt === "A") { 
     dV1 = dV_Value * 0.3; 
    } 
    var keyTechTotal1 = sV1 + dV1; 
    var keyTechTotal2 = sV2 + dV2; 
    return (keyTechTotal1)/(keyTechTotal2) * 100; 
} 

난 당신에게 더 일반적인 자바 스크립트 솔루션

변경 분을 표시하고 최대 HTML로 각 옵션에 대한 속성과 거기에서 계산하기 시작 아래.

당신은 genericly 데이터 분을 삽입 할 수 있습니다 그리고 당신은 pertentages을 계산하는 방법을 설명 할 수 있습니다 최대 닷넷

<input class="textBox" runat="server" type="text" id="keyTechTextBox" readonly="true" /> 
<select runat="server" id="dropdown_serverVirtualisation" onchange="keyTechAdoption()"> 
    <option class="lightgrey" value="N" data-min="0" data-max="1">N</option> 
    <option class="green" value="G" data-min="0" data-max="1">G</option> 
    <option class="orange" value="O" data-min="0" data-max="1">O</option> 
    <option class="yellow" value="A" data-min="0" data-max="1">A</option> 
    <option selected="selected" class="red" value="R" data-min="0" data-max="1">R</option> 
    <option class="purple" value="U" data-min="0" data-max="1">U</option> 
</select> 
<select runat="server" id="dropdown_desktopVirtualisation" onchange="keyTechAdoption()"> 
    <option class="lightgrey" value="N" data-min="0" data-max="1">N</option> 
    <option class="green" value="G" data-min="0" data-max="1">G</option> 
    <option class="orange" value="O" data-min="0" data-max="1">O</option> 
    <option class="yellow" value="A" data-min="0" data-max="1">A</option> 
    <option selected="selected" class="red" value="R" data-min="0" data-max="1">R</option> 
    <option class="purple" value="U" data-min="0" data-max="1">U</option> 
</select> 

<script type="text/javascript"> 
    function initCalculation(inputField,select1,select2){ 
     opt1 = select1.find('option:selected'); 
     opt2 = select2.find('option:selected'); 
     select1.change(function(){ //this can be done more generic 
      inputField.val(calculateValue(opt1,opt2).toFixed(0)+"%"); 
     }); 
     select2.change(function(){ 
      inputField.val(calculateValue(opt1,opt2).toFixed(0)+"%"); 
     }); 
    } 

    function calculateOptions(el1,el2){ 
     calculateValue(el1.data('min'),el1.data('max'),el1.data('min'),el1.data('max')); 
    } 

    function calculateValue(sV1,sV2,dV1,dV2){ //more abstract function name please :D 
     var keyTechTotal1 = sV1 + dV1; 
     var keyTechTotal2 = sV2 + dV2; 
     return (keyTechTotal1)/(keyTechTotal2) * 100; 
    } 
</script>