Question

说明

我的网页上有很多下拉菜单，所有下拉菜单都是＆＃34;更新价格＆＃34;功能。这样，当用户选择一个选项时，价格会相应地改变。这些下拉列表中有很多，它们都有相似的名称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，我不想复制/粘贴该静态代码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 ) ); 
}

Answer 1

为什么不在闭包中绑定你的函数，以便为该特定索引保存上下文。

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

Answer 2

您可以为所有选择的HTML元素添加CSS类，然后使用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);

});

Answer 3

如果适用于您的情况，您只需要直接使用公共类名（或目标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类的所有选择框。

在循环中使用jquery绑定事件？

3 个答案: