0

描述：

我的页面上有许多下拉菜单，它们都称为“更新价格”功能。这样当用户选择一个选项时，价格就会相应变化。有很多这样的下拉菜单，它们都有相似的名称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, );                
    });
}

此页面上将有很多.sizesdiv，我不想复制/粘贴该静态代码 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 ) ); 
}
4

3 回答 3

3

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

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-14T22:02:33.720 回答
1

您可以为所有选择的 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);

});
于 2013-01-14T21:51:53.067 回答
0

您只需要使用一个通用的类名（或者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-14T21:50:29.777 回答