jQuery'.each'并附加'.click'事件

hcc*_*hcc 45 each jquery

我不是一个程序员,但我喜欢建造原型.我的所有经验都来自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>
Run Code Online (Sandbox Code Playgroud)

我的(失败的)策略是:
1)制作一个对象数组:

var props = {
"dog": "false",
"cat": "true",
"mouse": "false"
};  
Run Code Online (Sandbox Code Playgroud)

2)使用'.each'遍历数组并使用'.click'事件扩充每个现有div.最后,构造一个局部变量.

这是一个原型:

$.each(props, function(key, value) {    
$('#'+key+'-selected').click(function(){
var key = value;  
});
});
Run Code Online (Sandbox Code Playgroud)

Nei*_*len 83

One solution you could use is to assign a more generalized class to any div you want the click event handler bound to.

For example:

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>
Run Code Online (Sandbox Code Playgroud)

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'); 
    });
});
Run Code Online (Sandbox Code Playgroud)

  • 这些不是变量,而是属性。id和class是非常标准的,但是您可以将data- {name}附加到元素上,并使用$(this).data('{name}');访问内容。这是有效的html5。 (3认同)
  • 您可以在div中包含变量吗?那是有效的HTML吗?感谢所有输入者!在写这个原型和文章的过程中,我似乎已经解决了这个问题。确实,麦汁确实不错!但感谢大家的贡献! (2认同)

Ori*_*iol 19

无需使用.each.click已经绑定到所有div事件.

$('div').click(function(e) {
    ..    
});
Run Code Online (Sandbox Code Playgroud)

见演示

注意:使用硬绑定,例如.click确保动态加载的元素不受约束.

  • 是的,但是当每个条目上都有一个按钮时,这不适用于档案。 (2认同)