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

标签 jquery each

我不是程序员,但我喜欢构建原型(prototype)。我所有的经验都来自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。最后,构造一个局部变量。

这是一个原型(prototype):

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

最佳答案

您可以使用的一种解决方案是为您希望绑定(bind)点击事件处理程序的任何 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'); 
    });
});

关于jQuery '.each' 并附加 '.click' 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18966222/

相关文章:

jquery - 相对于容器的响应式固定位置元素

javascript - 向下/向上滚动时显示白屏

javascript - 如何在具有特定 id 的 div 中按类对多个选定元素的数字求和

php - 当我从 PHP 传递字符串时,ajax 代码停止运行

jquery - jQuery 中的 if 语句总是返回 true

javascript - jQuery 每个 "sleep"内有回调

Jquery遍历类,计算字符串长度,比X短做某事

javascript - jQuery 划分元素并添加类

jquery - 使用each()将元素推送到JSON

javascript - 页面加载时的随机图像