如何压缩jquery代码的重复块

我正在使用一个O/S插件脚本，该脚本生成的id看起来像数组元素，如下所示：

<select name="serviceTypeID[1]" id="serviceTypeID[1]" ...
<select name="serviceTypeID[2]" id="serviceTypeID[2]" ... 
<select name="serviceTypeID[3]" id="serviceTypeID[3]" ...
<select name="serviceTypeID[4]" id="serviceTypeID[4]" ...
<select name="serviceTypeID[5]" id="serviceTypeID[5]" ...
<select name="serviceTypeID[6]" id="serviceTypeID[6]" ...
<select name="serviceTypeID[7]" id="serviceTypeID[7]" ...
<select name="serviceTypeID[8]" id="serviceTypeID[8]" ...
<select name="serviceTypeID[9]" id="serviceTypeID[9]" ...
<select name="serviceTypeID[10]" id="serviceTypeID[10]" ...

也许是一个循环

for (var i = 1; i <= 10; i++) {
    $('#serviceTypeID\\[' + i + '\\]').change(function () {

        var first = parseInt($('#firstService\\[' + i + '\\]').val(), 10);
        var second = parseInt($('#secondService\\[' + i + '\\]').val(), 10);
        var third = parseInt($('#thirdService\\[' + i + '\\]').val(), 10);
        if (isNaN(first)) first = 0;
        if (isNaN(second)) second = 0;
        if (isNaN(third)) third = 0;

        $('#serviceTotal\\[' + i + '\\]').val((first + second + third + ' Total'));

    });
}

for（var i=1；ia for循环是否可能

for (var i = 1; i <= 10; i++) {
    $('#serviceTypeID\\[' + i + '\\]').change(function () {

        var first = parseInt($('#firstService\\[' + i + '\\]').val(), 10);
        var second = parseInt($('#secondService\\[' + i + '\\]').val(), 10);
        var third = parseInt($('#thirdService\\[' + i + '\\]').val(), 10);
        if (isNaN(first)) first = 0;
        if (isNaN(second)) second = 0;
        if (isNaN(third)) third = 0;

        $('#serviceTotal\\[' + i + '\\]').val((first + second + third + ' Total'));

    });
}

for（var i=1；i首先，您需要选择的类属性，以使选择器更简单

<select class="serviceType" name="serviceTypeID[1]" id="serviceTypeID[1]" ...
<select class="serviceType" name="serviceTypeID[2]" id="serviceTypeID[2]" ... 

首先，您需要选择的类属性，以便更容易和更简单地选择

<select class="serviceType" name="serviceTypeID[1]" id="serviceTypeID[1]" ...
<select class="serviceType" name="serviceTypeID[2]" id="serviceTypeID[2]" ... 

您可以使用下面的片段将当前的HTML循环到您的选择框上。尽管如此，我怀疑了解更多的HTML结构（选择的父项）会使解决方案更简单

// All select boxes.
var selects=jQuery("select[name^='serviceTypeID']").change(function() {
    // Pattern to find the counter.
    var matcher = new RegExp("serviceTypeID\\[(\\d+)\\]");

    // Invoke your code for each select box.
    jQuery.each(selects, function(index, select){
        // Get the name.
        var name=jQuery(select).prop("name");
        // Extract the counter.
        var number = matcher.exec(name)[1];

        // Your block.
        var first = parseInt( $('#firstService\\['+number+'\\]').val(), 10 );
        var second = parseInt( $('#secondService\\['+number+'\\]').val(), 10 );
        var third = parseInt( $('#thirdService\\['+number+'\\]').val(), 10 );
        if (isNaN(first)) first = 0;
        if (isNaN(second)) second = 0;
        if (isNaN(third)) third = 0;

        $('#serviceTotal\\['+number+'\\]').val( ( first + second + third + ' Total') );
    });
});

您可以使用下面的片段使用当前的HTML在您的选择框上循环。也就是说，我怀疑了解更多的HTML结构（您的选择的父项）将允许一个更简单的解决方案

// All select boxes.
var selects=jQuery("select[name^='serviceTypeID']").change(function() {
    // Pattern to find the counter.
    var matcher = new RegExp("serviceTypeID\\[(\\d+)\\]");

    // Invoke your code for each select box.
    jQuery.each(selects, function(index, select){
        // Get the name.
        var name=jQuery(select).prop("name");
        // Extract the counter.
        var number = matcher.exec(name)[1];

        // Your block.
        var first = parseInt( $('#firstService\\['+number+'\\]').val(), 10 );
        var second = parseInt( $('#secondService\\['+number+'\\]').val(), 10 );
        var third = parseInt( $('#thirdService\\['+number+'\\]').val(), 10 );
        if (isNaN(first)) first = 0;
        if (isNaN(second)) second = 0;
        if (isNaN(third)) third = 0;

        $('#serviceTotal\\['+number+'\\]').val( ( first + second + third + ' Total') );
    });
});

除了重构以消除重复之外，还应该使用带有
parseInt
：
var x=parseInt（foo，10）的基参数
。谢谢你的建议@IngoBürk，这也有点超出了我目前的技能发展进度。在
parseInt
的每次调用中添加
，10
，这超出了你的技能范围？作为旁注，有一种叫做类的方法可以更容易地针对许多元素，甚至还有一种基于w的针对元素的方法hat a attribute@H.Ferrence这很公平。你可以用谷歌搜索详细的原因，但简而言之，如果用户输入
08
而不是
8
，不指定基数允许Javascript猜测基数，这可能会出错。除了重构以消除重复之外，你还应该使用带有的基数参数ode>parseInt
：
var x=parseInt（foo，10）
。谢谢你的建议@IngoBürk，这也有点超出了我目前的技能发展进度。在
parseInt
的每次调用中添加
，10
，这超出了你的技能范围？作为旁注，有一种叫做类的方法可以更容易地针对许多元素，甚至还有一种基于w的针对元素的方法hat a attribute@H.Ferrence这很公平。你可以用谷歌搜索详细原因，但简而言之，如果用户输入
08
而不是
8
，不指定基数允许Javascript猜测基数，这可能会非常错误。非常酷@naveen。谢谢你的建议。我现在就试试，然后发回。非常好感谢你的时间和帮助。很高兴能帮上忙，我的朋友。我将接受奥古尔对@naveen问题的回答。不是因为你的回答不起作用——事实上，你的答案起作用，你先回答了——但我喜欢听我提出的改变课堂的建议，我实施了，效果很好。另外，[at]ogur需要更多的积分，因为到目前为止你已经积累了相当多的积分。所以不给你更多的积分不应该让你不高兴（我希望）。祝你度过愉快的一天，谢谢你的帮助。。。@H.Ferrence，没问题。这始终是你的问题。事实上，ogurs的答案是更准确的压缩。我对我的答案做了一些更改，因为我认为你不需要在更改事件中重新计算所有字段。ogurs代码重新计算所有字段。我的代码只重新计算行。等等，不要更改e您的答案@naveen…我实际上不想重新计算所有内容--不需要消耗本地资源。我的访问者交互是逐元素的，所以我只想计算“行”这就改变了。我现在回去调整我的答案，因为我更清楚地看到你在做什么。非常酷@naveen。谢谢你的建议。我现在就试试并发回。非常感谢你的时间和帮助。很高兴帮助我，我的朋友。我将接受[在]ogur对问题@naveen的回答。不是因为你的答案不起作用——事实上，你的答案起作用了，你先回答了——但我喜欢听我的建议，在课堂上做些改变，我实施了，效果很好。另外，[at]ogur需要更多的积分，因为到目前为止你已经积累了相当多的积分。所以不给你更多的积分不应该让你不高兴（我希望）。祝你度过愉快的一天，谢谢你的帮助。。。@H.Ferrence，没问题。这始终是你的问题。事实上，ogurs的答案是更准确的压缩。我对我的答案做了一些更改，因为我认为你不需要在更改事件中重新计算所有字段。ogurs代码重新计算所有字段。我的代码只重新计算行。等等，不要更改e您的答案@naveen…我实际上不想重新计算所有内容--不需要消耗本地资源。我的访问者交互是逐元素的，所以我只想计算“行”这改变了。我现在回去调整我的答案，因为我更清楚地看到了你的答案。这也是一个很好的建议。我将尝试将两个答案都纳入我的解决方案。再次感谢@ogurThanks@ogur。祝你有一个美好的一天！这也是一个很好的建议。我将尝试将两个答案都纳入我的解决方案。再次感谢@ogurThanks@ogur。哈我今天过得很好！好的，谢谢@AugustusKling。我实际上是在实现前面的2个答案，并让我的脚本使用它们。但我非常感谢你的建议。所有3个解决方案都有效且正确，可以循环10个元素框组。我添加了模式以允许其他组计数和省略组编号。选择最简单的解决方案适用于您的情况。好的，谢谢@AugustusKling。我实际上是在实现前面的2个ANSER，并让我的脚本使用它们。但我非常感谢您的建议。所有3个解决方案都有效且正确，可以循环10个元素框组。我添加了该模式以允许其他组计数，并省略了组数字也是。选择最简单的解决方案。