Question

我使用.each()方法和$(this)选择器填充包含元素的数组。

(function($){

    var elements = new Array();
    var index = 0;
    $("img").each(function() {
        if($(this).attr("attribute")){
            $(this).attr("imageIndex", index);
            elements[index] = $(this);
            index++;
        }
    });

}(jQuery));

我想在我的代码中添加一个事件监听器，该代码在单击该数组中的任何元素时执行。

例如：

$(elements).click = function(){
    console.log("success");
}

我认为onclick属性可以在每个图像循环播放时进行更改，但这似乎有些不确定。在我实施之前，我想确定这是我的最后手段。

Answer 1

不需要数组，您可以使用element selector和has attribute selector来获取具有给定属性的所有图像元素，然后使用.click()注册事件处理程序< / p>

$("img[attribute]").click(function(){
    //do your stuff
})

Answer 2

使用jQuery的map函数将数组元素连接到一个组合的jQuery对象中然后将jQuery事件附加到此对象（在此示例中使用＆＃34; on（）＆＃34;。

＆＃13;

var elements = [$('#blah'), $('#blup'), $('#gaga')];  //basically what you are starting with

var combiObj = $.map(elements, function(el){return el.get()});
$(combiObj).on('click', function(ev){
	console.log('EVENT TRIGGERED');
});

＆＃13;

button{
  display: block;
  margin: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="blah">Button blah</button>
<button id="blup">Button blup</button>
<button id="gaga">Button gaga</button>

＆＃13;

Answer 3

使用逗号分隔的选择器列表，用引号括起来，如下所示：

$('#id, .selector, .somethingElse').click(function() {
    //your handler
});

Answer 4

不需要在数组中存储对象，您可以通过这种方式获取当前事件

<script type="text/javascript">
     $(function(){
        $("img").bind("click", function(Event){
            console.log(Event.target);
         });
     })
</script>

当你点击任何图像元素时，你将获得函数“Event.target”中的当前事件目标，或者也可以这样使用$（Event.target）.fun（{...}）;

Answer 5

我只是对Girish所说的添加了评论，但是由于我还没有足够的声誉，所以这是我对Girish的回答。

我只想补充一下，如果要将事件侦听器添加到按钮数组中，并且每个按钮中都有一个图像，则仅使用Event.target来访问按钮可能会导致问题，因为其中的图像如果点击图片，该按钮可能会成为事件目标。尝试点击图片，然后点击以下代码段中的图片。单击图像时，事件目标是图像，而不是按钮。

检查一下：

$('button').click(e => $('#eventTarget').text(e.target));

/*just random styling to make things a little clearer. not important*/
button {
  padding: 20px;
}
button img {
  height: 50px;
}
div {
  padding: 20px;
  background: #eee;
  margin-top: 10px;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>
 <img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2013/240/iconmonstr-trash-can-1.png" alt="">
</button>

<div id="eventTarget"></div>

要避免这种情况，请从按钮内的图像中删除所有指针事件，以便只有按钮可以成为事件目标。

使用此CSS可以避免上述问题：

button img {
  pointer-events: none;
}

Jquery：元素数组的事件监听器

5 个答案: