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クラスを追加してから、jQueryCSSセレクターを使用してすべての要素を取得できます。

<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 に答える