1

これは鶏が先か卵が先か、閉鎖の問題か、私が見逃している何かだと思います。onClick イベント ハンドラーがある場合、JQuery で数値セレクター値をループするにはどうすればよいですか?

$("#q01").click(function() {
    clearIt();
    $("#item01").show();
}); 
$("#q02").click(function() {
    clearIt();
    $("#item02").show();
});
$("#q03").click(function() {
    clearIt();
    $("#item03").show();
});
4

6 に答える 6

2

あなたの例はおそらく単純化されているので、正確に言うのは難しいです。ただし、ID で選択するのではなく、より一般的なセレクターを試してください ( を使用できます$('[id^="q"]')が、それは実際のベスト プラクティスではありません)。ID 要素をクラスのように使用していますが、これは実際にidは目的ではありません。

ボタンやターゲットのclassような属性をすべて与えると、次のようなことができます:class="q"class="item"

$('.q').each(function(index) {
    var targetItem = $('.item').eq(index);
    $(this).click(function() {
        clearIt();
        targetItem.show();
    });
});

ただし、マークアップ内でクリック可能な各要素のターゲットを指定する方が簡単で、安全で、より良い方法です。

<a href="#" class="p" target-index="01">p01</a>
<a href="#" class="p" target-index="02">p02</a>

<div class="item" item-index="01">item01</div>
<div class="item" item-index="02">item02</div>

その場合、ページ上の順序と場所は問題になりません。それらを直接選択することができます：

var num = $(this).attr('target-index');
var targetItem = $('.item[item-index="' + num + '"]');

最後に (そして私の好みのアドバイス)、ターゲットの ID をボタン自体に入れることができます。

<a href="#" class="p" for="item01">p01</a>
<div id="item01">item01</div>

次に、ターゲットの場所に関係なく、ターゲットをすばやく安全に選択できます。

var targetItem = $('#' + $(this).attr('for'));

編集1：

最初のスニペットでは、要素の順序について仮定しています。これは、クリックされた要素をターゲット アイテムに関連付ける方法がたくさんあるためです。マークアップのルールを知っているのはあなただけです。つまり、どのような仮定が機能するかを知っているのはあなただけです。例えば：

var targetItem = $('#' + $(this).attr('id').replace(/^q/, 'item'));
var targetItem = $(this).siblings('[id^="item"]');
var targetItem = $(this).children('[id^="item"]');
var targetItem = $(this).parents('[id^="item"]');
var targetItem = $(this).find('[id^="item"]');

私が提案した手法を使用しない場合target-indexは、HTML に関する知識に基づいて、少なくともいくつかの仮定を行う必要があります。

編集2：

イベントバインディングコードを改善するのではなく、ハンドラーをトリガーしようとしているというコメントに基づいて、次のように行うことができます。

//quick and dirty zero-padding function from http://stackoverflow.com/q/10073699/399649
var pad = function(num, size) {
  return (Math.pow(10, size) + ~~num).toString().substring(1);
};
for(var i = 1; i < $('[id^="q"]').length; i++) {
    var index = pad(i, 2);
    $('#q' + index).trigger('click');
}
于 2013-04-12T19:39:27.483 に答える