循环浏览图库图像作为链接，不是控制台记录 onclick，而是通过 css 激活

Question

我试图循环浏览渐变条带画廊，突出显示它们，以便可以在主图像中编辑它们，但在单击它们来测试它们是否正常工作时遇到了障碍。它们位于引导行中，如 col-md-3，并且每个样本 bg 都有一个 bg-gradient id（行 id 是 gallery）。下面的代码在悬停时通过 CSS 激活，但不会在单击时控制台记录测试消息。

html 结构是一个 id 为“gallery”的引导行，然后是 id 为“swatch”的 4 col-md-3，然后实际的 bg-gradient 就是正在循环的内容。这些在悬停时通过 css 设置而不是通过 JavaScript 激活，但不会在单击时控制台记录测试消息。

演示

代码：

editSwatch() {

 let swatchs = document.querySelectorAll('swatch'),

 //let swatchs = document.getElementById('gallery'),

 links = swatchs.getElementsByTagName('bg-gradient'),

 i;

 for (i = 0; i < links.length; i += 1) {

 links[i].addEventListener('click', function () { console.log('click works') });

 }

按照下面的注释更新了代码，但结果仍然完全相同，在链接 var 上尝试了 tagName ，仍然相同。

似乎正在找到样本，但无法点击。需要点击一下才能继续吗？

https://i.stack.imgur.com/eTyvv.jpg

Answer 1

您不能为样本保留相同的 ID，您也可以使用下面的查询选择器和适当的选择器作为参数并循环样本var swatchs= document.querySelectorAll(".swatchs");

Answer 2

从技术onclick上讲需要是一个函数。console.log()目前您正在传递我相信的返回值undefined。需要将函数附加到click事件才能使其工作。您可以addEventListener按以下方式使用：links[i].addEventListener('click', function () { console.log('click works') });click请参阅如何将事件附加到的工作示例<div>：const div = document.getElementById('elem');div.addEventListener('click', function () { console.log('hey hello'); });<div id="elem">Click me!</div>