在jQuery中的循環綁定事件？

我在我的網頁上有很多下拉菜單，都稱爲「更新價格」功能。這是因爲當用戶選擇一個選項時，價格會相應地改變。還有很多其它的下拉列表中，他們都具有相似的名稱sizes-1，sizes-2等

問題

，我發現自己複製/粘貼極其相似的事件綁定代碼，因爲我無法弄清楚如何綁定它通過某種循環。

例子：

靜態

$('.sizes-1').on('change', function() { 
     sizes[0] = $(this).val(); 
     p.update_pricing(slider_values, price_fields, sizes,); 
});

嘗試在一個循環（不工作）

for(index = 0; index < number of divs; index++) {   
    $('.sizes-' + index).on('change', function() { 
     sizes[ index ] = $(this).val(); 
     p.update_pricing(slider_values, price_fields, sizes,);     
    }); 
}

有將要上這麼多.sizes的div頁面d我不想複製/粘貼該靜態代碼30多次。我想知道是否有人遇到類似的問題並知道解決方案？

非常感謝。

編輯：（複製/粘貼代碼）

for(index = 0; index < num_divs; index++) { 
    (function(context_index) {  
      $('.sizes-' + context_index).on('change', function() { 
      sizes[ context_index ] = $(this).val(); 
      p.update_pricing(slider_values, price_fields, sizes);     
     }); 
    } (index)); 
}

來源

2013-01-14 Phil

ID就像'size-1'，'size-2'是可以理解的。但爲什麼你會有不同班級的30+下拉菜單呢？一個單一的類作爲'尺寸'將真正解決你的問題。 –

爲什麼不給他們同班？ –

同樣在第二個版本中，'.change'中的索引不會是正確的值，因爲執行處理函數時'i'的值將等於'div的數量'。 –

您可以添加CSS類到你所有的選擇HTML元素，然後，使用jQuery CSS選擇器來獲取所有這些

<select class="selectSpecial" id="sizes-1">...</select> 
<select class="selectSpecial" id="sizes-2">...</select> 
etc

的你找回所有的選擇與

$(".selectSpecial").on('change', function(changeEvent) { 

    var index = parseInt($(this).attr('id').replace('size-', '')) - 1; 
    sizes[index] = $(this).val(); 
    p.update_pricing(slider_values, price_fields, sizes); 

});

來源

2013-01-14 21:51:53 MatRt

我將如何唯一地獲取select的值並將它們放入數組中？這是行不通的。 – Phil

您可以將「size-1」，「size-2」等放置爲select元素的id而不是class，然後使用此id檢索數組的索引：$（this）.attr（'id'）。替換（ '大小 - '， ''）。封閉解決方案很好，但您正在創建大量的匿名功能。 – MatRt

你能否詳細說明我如何檢索值？我很困惑，我會把'$（this）.attr（'id'）放在哪裏。replace（'size-'，''）' – Phil

你只需要使用一個共同的類名（或直接針對select如果這部作品在您的情況：

$('.sizes').on('change', function() { // <---- Note 'sizes' 
    sizes[0] = $(this).val(); 
    p.update_pricing(slider_values, price_fields, sizes,); 
});

HTML

<select class="sizes sizes-1"> 
    <-- options here --> 
</select>

這將適用於所有選擇框與sizes班。

來源

2013-01-14 21:50:29

爲什麼你不把你的功能綁定在關閉內，以便爲該特定索引保存上下文..

for(index = 0; index < number of divs; index++) { 
    (function(contextIndex) {  
     $('.sizes-' + contextIndex).on('change', function() { 
      sizes[ contextIndex] = $(this).val(); 
      p.update_pricing(slider_values, price_fields, sizes,);     
     }); 
    }(index)); 
}

來源

2013-01-14 22:02:33

這是不工作的任何原因。綁定沒有被應用。 – Phil

你可以複製粘貼你的代碼..到你的問題 –

按要求編輯。 – Phil

在jQuery中的循環綁定事件？

回答

相關問題