Question

有人请帮我一些javascript编码。我正在使用asp.net构建一个网站，其中有多个html选择元素，并且他们选择的选项决定输入框的值是什么，请参阅此链接： 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;
}

下面我将向您展示一个更通用的JavaScript解决方案

更改html中每个选项的min和max属性，然后从那里开始计算。

您可以通用地在.net

中插入数据最小和最大属性

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

使用带有选择选项的javascript进行计算？

1 个答案: