如何凝結的jQuery代碼重複塊

Question

我使用的是O/S插件腳本不必硬編碼 - 重複html選擇元素的所有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

首先，你需要class屬性爲選擇，更容易和更簡單的選擇。

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

然後你就可以在函數調用中使用的循環：

$('.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

a for loop也許？

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

    }); 
} 

Answer 3

你可以在你的選擇框使用下面的片段循環與你有當前的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')); 
    }); 
});