Question

我有两个图像，image_0和image_1，当点击每个图像时，我希望它显示一个警告，说明该图像的ID。为此，我创建了一个数组来存储这些函数（由于我之前的问题，这是必要的：https://stackoverflow.com/questions/41003122/looping-in-jquery-only-remembers-last-iteration?noredirect=1#comment69215730_41003122）。

以下代码显示了我的尝试。但是，当我点击任一图像时没有任何反应。为什么呢？

HTML：

<img id="image_0" src="http://placehold.it/350x150" width="300">
<img id="image_1" src="http://placehold.it/350x150" width="300">

使用Javascript：

$(document).ready(function()
{
    // The number of images shown
    num_images = 2

    // List of functions for each thumbnail click.
    var image_click_functions = new Array(num_images);

    // Define the function for when the thumbnail is clicked
    function CreateImageClickFunction(image_id)
    {
        return function() { alert(image_id) };
    }

    // Loop through all images, and define the click functions
    for (i = 0; i < num_images; i++)
    {
        image_click_functions[i] = CreateImageClickFunction(i);
        image_id = "#image_" + i;
        $(image_id).click(function()
        {
            image_click_functions[i];
        });
    }
});

Answer 1

添加公共类，创建一个处理程序，并使用this的实例

<img class="image" id="image_0" src="http://placehold.it/350x150" width="300">
<img class="image" id="image_1" src="http://placehold.it/350x150" width="300">

JS：

$(".image").click(function() { alert(this.id) });

Answer 2

为什么你需要写它如此复杂？

你很容易做到：

$('img').click(function(){
   alert($(this).attr('id'));
}

（这实际上为每个人创建了一个不同的监听器）

或者您可以像这样使用on：

$(document).on('click','img',function(){
   alert($(this).attr('id'));
})

具有以下优点：

一个。仅使用一个事件监听器

湾适用于动态创建的内容（例如，如果使用ajax添加更多图像，则此事件侦听器仍可用于新图像）

Answer 3

当CreateImageClickFunction(image_id)返回一个函数时，您只需要将该函数作为事件处理程序传递。

$(image_id).click(image_click_functions[i]);

可替换地。根据现有HTML，您可以使用Attribute Starts With Selector [name^=”value”]绑定事件

$('[id^image_]').click(function(){
    //Extract number from ID
    var idNum = this.id.match(/\d+$/)[0];
})

如果您需要存储一些任意数据，我建议您使用data-*前缀自定义属性，可以使用$.fn.data()方法或HTMLElement.dataset属性提取

<img class="image" data-id="0" src="http://placehold.it/350x150" width="300">
<img class="image" data-id="1" src="http://placehold.it/350x150" width="300">

脚本

$(parentContainerSelector).on('click','.image',function(){
   console.log(this.dataset.id);
})

Answer 4

我认为你过于复杂了。看看这个例子： HTML：

＆＃13;

    $("#container").on("click", "img", function(e){
      console.log($(this).attr("id"));
    })

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"> 
      <img id="image_0" src="http://placehold.it/350x150" width="300">
      <img id="image_1" src="http://placehold.it/350x150" width="300">
    </div>

＆＃13;

例如： http://codepen.io/xszaboj/pen/PbeypX?editors=1010

Answer 5

我认为你在原始问题中不理解Closures过于复杂。这是JS中更高级的“功能”，但值得花时间研究和理解。

然而，在jQuery中执行此操作的一种更简单的方法是将图像用作选择器，并以这种方式迭代它们。然后，您可以访问this作为图片。 Here's example code

img.click（）函数数组

5 个答案: