web-dev-qa-db-ja.com

jQuery「.each」および「.click」イベントの添付

私はプログラマーではありませんが、プロトタイプの作成を楽しんでいます。私の経験はすべて、actionScript2から得ています。

これが私の質問です。コードを簡素化するために、「。click」イベントをHTML本文に既に存在するdivにアタッチする方法を見つけたいと思います。

<body>
<div id="dog-selected">dog</div>
<div id="cat-selected">cat</div>
<div id="mouse-selected">mouse</div>

<div class="dog"><img></div>
<div class="cat"><img></div>
<div class="mouse"><img></div>
</body>

私の（失敗した）戦略は：
1）オブジェクトの配列を作成します。

var props = {
"dog": "false",
"cat": "true",
"mouse": "false"
};

2）「.each」で配列を反復処理し、「。click」イベントで既存の各divを拡張します。最後に、ローカル変数を作成します。

これがプロトタイプです：

$.each(props, function(key, value) {    
$('#'+key+'-selected').click(function(){
var key = value;  
});
});
jqueryeach
43
hcc

使用できる解決策の1つは、クリックイベントハンドラーをバインドするdivに、より一般化されたクラスを割り当てることです。

例えば：

HTML：

<body>
<div id="dog" class="selected" data-selected="false">dog</div>
<div id="cat" class="selected" data-selected="true">cat</div>
<div id="mouse" class="selected" data-selected="false">mouse</div>

<div class="dog"><img/></div>
<div class="cat"><img/></div>
<div class="mouse"><img/></div>
</body>

JS：

$( ".selected" ).each(function(index) {
    $(this).on("click", function(){
        // For the boolean value
        var boolKey = $(this).data('selected');
        // For the mammal value
        var mammalKey = $(this).attr('id'); 
    });
});
74
Neil.Allen

.eachを使用する必要はありません。 clickはすでにすべてのdivのオカレンスにバインドしています。

$('div').click(function(e) {
    ..    
});

デモを参照

注：.clickなどのハードバインディングを使用して、動的にロードされた要素がバインドされないようにします。

18
Oriol