Question

我正在使用一个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]" ...

如何压缩以下jquery脚本，以便我不必对html select元素的所有10个实例进行硬编码重复？我可以设置一个隐藏的表单元素，并为其设置索引值并使用类似的东西。（）。val（）？这有点超出了我的编码技巧。感谢。

    $('#serviceTypeID\\[1\\],#serviceTypeID\\[2\\],#serviceTypeID\\[3\\],#serviceTypeID\\[4\\],#serviceTypeID\\[5\\],#serviceTypeID\\[6\\],#serviceTypeID\\[7\\],#serviceTypeID\\[8\\],#serviceTypeID\\[9\\],#serviceTypeID\\[10\\]').change(function() {

      // 1st identical instance of the block
      var first = parseInt( $('#firstService\\[1\\]').val() );
      var second = parseInt( $('#secondService\\[1\\]').val() );
      var third = parseInt( $('#thirdService\\[1\\]').val() );
      if (isNaN(first)) first = 0;
      if (isNaN(second)) second = 0;
      if (isNaN(third)) third = 0;

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

      // 2nd identical instance of the block
      first = parseInt( $('#firstService\\[2\\]').val() );
      second = parseInt( $('#secondService\\[2\\]').val() );
      third = parseInt( $('#thirdService\\[2\\]').val() );
      if (isNaN(first)) first = 0;
      if (isNaN(second)) second = 0;
      if (isNaN(third)) third = 0;

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

      // 3rd identical instance of the block
      first = parseInt( $('#firstService\\[3\\]').val() );
      second = parseInt( $('#secondService\\[3\\]').val() );
      third = parseInt( $('#thirdService\\[3\\]').val() );
      if (isNaN(first)) first = 0;
      if (isNaN(second)) second = 0;
      if (isNaN(third)) third = 0;

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

    //and so on up to 10 currently

      // 10th identical instance of the block
      first = parseInt( $('#firstService\\[10\\]').val() );
      second = parseInt( $('#secondService\\[10\\]').val() );
      third = parseInt( $('#thirdService\\[10\\]').val() );
      if (isNaN(first)) first = 0;
      if (isNaN(second)) second = 0;
      if (isNaN(third)) third = 0;

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

    });

Answer 1

首先，您需要选择类属性，以便更轻松，更简单的选择器。

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

然后你可以在函数调用中使用for循环：

$('.serviceType').change(function() {

    for(var i=1; i<=10; i++){
      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') );
    }
});

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

Answer 3

一个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'));

    });
}

如何压缩重复的jquery代码块

3 个答案: