Question

这是我在html和java脚本中的代码。我把相同的事情编成三次，我想做一次......怎么做...............

<input type="text" name="option1" id="option1" onblur="calc_amt(1);">
<input type="text" name="price1" id="price1"  onblur="calc_amt(1);">
<input type="text" name="amount1" id="amount1" readonly>

<input type="text" name="option2" id="option2" onblur="calc_amt(2);">
<input type="text" name="price2" id="price2"  onblur="calc_amt(2);">
<input type="text" name="amount2" id="amount2" readonly>

<input type="text" name="option3" id="option3" onblur="calc_amt(3);">
<input type="text" name="price3" id="price3"  onblur="calc_amt(3);">
<input type="text" name="amount3" id="amount3" readonly>


<script>
function calc_amt(val){                             
                if(val==1){                                     
                    var option1 = document.getElementById("option1").value;
                    var pri1 = document.getElementById("price1").value;
                    ....
                    document.getElementById("amount1").value=amoun1 ;
                }
                if(val==2){                                     
                    var option2 = document.getElementById("option2").value;
                    var pri2 = document.getElementById("price2").value;
                    ...
                    document.getElementById("amount2").value=amoun2;
                }
                if(val==3){                                     
                    var option3 = document.getElementById("option3").value;
                    var pri3 = document.getElementById("price3").value;
                    ....
                    document.getElementById("amount3").value=amoun3;
                }
                var amoun1=document.getElementById("amount1").value;
                var amoun2=document.getElementById("amount2").value;
                var amoun3=document.getElementById("amount3").value;
                var tot = Number(amt1)+Number(amt2)+Number(amt3);
                document.getElementById("amount").value=tot;
            }
</script>

如何通过编码只解决一次......我是初学者，请帮助我......任何其他想法来解决这个问题......我需要像继承这样的解决方案。

Answer 1

替换：

if(val==1){                                     
  var option1 = document.getElementById("option1").value;
  var pri1 = document.getElementById("price1").value;
  document.getElementById("amount1").value=amoun1 ;
}

使用：

 var amoun = document.getElementById("amount" + val).value;
 var option = document.getElementById("option" + val).value;
 var pri = document.getElementById("price" + val).value;
 document.getElementById("amount" + val).value=amoun;

Answer 2

你可以像这样进一步减少上面的脚本。您的amoun目前还不清楚。但是，您可以像这样减少代码。这只是一个想法，并确保您使用正确的语句匹配变量。

<script>
function calc_amt(val){                             

                var option1 = document.getElementById("option"+val).value;
                var pri1 = document.getElementById("price"+val).value;
                ....
                document.getElementById("amount"+val).value=""+amount+val ;

                var amoun1=document.getElementById("amount1").value;
                var amoun2=document.getElementById("amount2").value;
                var amoun3=document.getElementById("amount3").value;
                var tot = Number(amt1)+Number(amt2)+Number(amt3);
                document.getElementById("amount").value=tot;
            }
</script>

Answer 3

... TRY 删除所有内联处理程序并使用模糊处理程序，如演示

$("input[type=text]").on("blur", function () {

    var id = this.id;
    var last = id.charAt(id.length - 1);           // get last id string value
    var optionValue = $("#option" + last).val();
    var priceValue = $("#price" + last).val();
    var option = isNaN(optionValue) ? 0 : +optionValue;   // check is nan 
    var price = isNaN(priceValue) ? 0 : +priceValue;

    $("#amount" + last).val(option * price);  // display multiply value

    $("#amount").text($("input[type=text][id^=amount]").map(function () {  // collect all amount1,2,3  values 
        var value = $(this).val();
        return isNaN(value) ? 0 : +value;
    }).get().reduce(function (a, b) {              // add total value
        return a + b;
    }));
});

DEMO

优化代码

$("input[type=text]:not([readonly])").on("blur", function () {

    var obj = $();

    obj = obj.add($(this)).add($(this).prevUntil('[readonly]')).add($(this).nextUntil('[readonly]'));

    $(this).nextAll('[readonly]').first().val($.map(obj, function (val, i) {
        return parseInt(val.value, 10) || 0;
    }).reduce(function (a, b) {
        return a * b
    }, 1));

    $("#amount").text($("input[type=text][id^=amount]").map(function () {
        var value = $(this).val();
        return isNaN(value) ? 0 : +value;
    }).get().reduce(function (a, b) {
        return a + b;
    }));


});

javascript函数用于不同的文本框我的代码在这里

3 个答案:

DEMO

DEMO