单击链接以显示图像

Question

我是编程和在显示链接列表的网站上工作的新手。 单击特定链接，显示一些图像。 现在，我想知道是否需要为每个链接添加一个事件监听器，因为如果我有100个链接，那意味着我必须编写100个事件监听器吗？

document.getElementById("monkwhosold").addEventListener("click",function() {disp_img(/MonkWhoSold)}); 

上面的事件侦听器是一个示例，其中用户单击链接之一，然后使用作为参数传递的img文件夹路径调用disp_img函数。

Answer 1

有很多解决方法。 这是一个

<a href="#" class="image-link" data-url="/MonkWhoSold">
<a href="#" class="image-link" data-url="/AnotherImage">
...

然后，您可以在JavaScript中编写：

// find all <a> tags with class of 'image-link'
var links = document.querySelectorAll('a.image-link');

// loop through them all
for (var i = 0; i < links.length; i++)
{
    var link = links[i];
    // listen for the click event
    link.addEventListener('click', function()
    {
        // on click, show the image using the URL from the data-url attribute
        disp_img(link.data.url);
    });
}

这不使用任何jQuery。 如果您最近开始编程，我认为值得直接学习DOM。 曾几何时，这并非易事或无法在所有浏览器中使用，jQuery确实很有价值。 如今，尽管仍然很方便，但事实并非如此。

在此代码中，您真正需要学习的功能只有三个：

• querySelectorAll查找与某些CSS选择器匹配的所有元素
• addEventListener将回调函数附加到特定事件
• element.data访问存储在HTML的data-foo="bar"属性中的数据

除此之外，它还for ， function和其他简单元素。

Answer 2

首先，出于多种原因，我建议您使用类似jQuery的工具。

假设您以这种方式有一系列图像：

<div id="myLinks">
   <a href="...">link1</a>
   <a href="...">link2</a>
   ...
</div>

运用

$('#myLinks a').on('click', function() {disp_img($(this).attr("href"))});

就像您使用普通Javascript编写的代码一样。 但是，就像您的一样，通过这种方式，您正在为每个图像创建处理程序（非常慢）。

但我建议使用以下一种：

$('#myLinks').on('click', 'a', function() {disp_img($(this).attr("href"))});

因为通过这种方式，您仅对所有链接使用一个侦听器。 那是更好的表现！

Answer 3

如果链接很多，请按类获取元素。

JavaScript的：

document.getElementsByClassName("imageLink").addEventListener("click", function () { 
      //do something
});

JQuery的

$('.imageLink').on('click', function () {
      //do something
});

这样，您只有一个功能，而不是每个链接一个功能。