Javascript img.click（）函数数组

我有两个图像，image_0和image_1，单击每个图像时，我希望它显示一个警报，说明该图像的id。为此，我创建了一个数组来存储这些函数（这是必要的，因为我以前的问题：）

下面的代码显示了我的尝试。但是，当我单击任一图像时，都不会发生任何事情。为什么?

HTML:

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];
        });
    }
});

$（文档）.ready（函数（）
{
//显示的图像数
num_images=2
//每个缩略图单击的函数列表。
var image\u单击函数=新数组（num\u图像）；
//定义单击缩略图时的函数
函数CreateImageClickFunction（图像id）
{
返回函数（）{alert（image_id）}；
}
//循环浏览所有图像，并定义单击功能
对于（i=0；i

当

CreateImageClickFunction（image\u id）

返回函数时，只需将函数作为事件处理程序传递即可

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

或者。根据现有的HTML，您可以使用它来绑定事件

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

---

如果您需要存储一些任意数据，我建议您使用

data-*

前缀自定义属性，可以使用方法或属性获取该属性

---

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

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">

---

你为什么要写得这么复杂

你可以很容易地做到：

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

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

或者您可以像这样在上使用

：

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

其优点是：

a。仅使用一个事件侦听器

b。处理动态创建的内容（例如，如果您使用ajax添加更多图像，此事件侦听器仍将处理新图像）
我认为您将这一点复杂化了。
看看这个例子：
html:


$（“#容器”）。在（“单击”，“img”，函数（e）{
log（$（this.attr（“id”））；
})
我认为你的问题太复杂了，没有理解原来的问题。这是JS中更高级的“特性”，但值得花时间研究和理解

然而，在jQuery中实现这一点的一种更简单的方法是使用图像作为选择器，并以这种方式对其进行迭代。然后，您可以通过图像访问此

这有点倒退。有一个单击功能，并从单击的元素中提取信息。但这仍然是一个非常糟糕的方法。。。单个处理程序和按属性标识项等是使用

id

的方式，

属性以选择器开始是一种非常模糊的JS组织方式。作为一名开发人员，使用一个专用类（例如
.js img click
）更为明显。我建议的唯一改进是将其作为委托事件处理程序。
<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">

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

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

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