单击链接以显示图像答案

【问题标题】：Clicking on a link to display images单击链接以显示图像
【发布时间】：2014-11-04 18:35:12
【问题描述】：

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

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

上述事件监听器是一个示例，其中用户单击其中一个链接并调用 disp_img 函数，并将 img 文件夹路径作为参数传递。

【问题讨论】：

你知道 jQuery 吗？您可以选择包含 jQuery 吗？如果是这样，这样的任务就会变得容易得多。
不要添加 100 个事件监听器。而是使用数据属性。给所有链接一个 data-url 属性，然后给他们 urls 。并在点击时相应地打开它们
你为什么不用jQuery？

标签： javascript html

【解决方案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 和其他简单的语言元素。

【讨论】：

为什么值得直接学习“DOM 的东西”？我不同意，我认为只要您了解 jQuery 如何选择元素就可以使用它，并鼓励您在利用可用库时足智多谋，即您将要重新发明的轮子。
@DeeMac，各有各的。我的观点是 jQuery 最好的部分被纳入了 ECMAscript 规范（querySelector 和朋友们），尽管方式稍微冗长一些。老实说，如果您取出我放在那里的 cmets，上面的代码并没有那么长，因为 OP 说他们正在学习编程。如果你想擅长某件事，你应该了解你所使用的水平之下的水平——例如，如果不了解一些化学，你就不可能成为一名知识渊博的生物学家。
很公平，我明白你的意思。无论如何+1，我不知道querySelectorAll（我可能在这里为你说明你的观点！）。
@DeeMac，直接学习 DOM API 的另一个好处是您可以更快地尝试新东西，而无需等待 jQuery 支持。很快我们就会有for...of loops，这将使上面的代码更加简洁。

【解决方案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"))});

因为通过这种方式，您只为所有链接使用了一个侦听器。性能更高！

【讨论】：

【解决方案3】：

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

JavaScript：

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

jQuery

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

这样你就有一个功能，而不是每个链接一个功能。

【讨论】：