javascript - 循环通过画廊图像作为链接而不是控制台记录 onclick，但通过 css 变为活动状态

Question

我正在尝试遍历渐变条库，以突出显示它们，以便可以在主图像中对其进行编辑，但是在单击它们以测试它们是否正常工作时遇到了障碍。它们位于引导行中，作为 col-md-3 的，并且每个样本 bg 的 id 为 bg-gradient（行 id 是画廊）。下面的代码在悬停时通过 css 激活，但不会在单击时控制台记录测试消息。

html 结构是一个 id 为“gallery”的引导行，然后是 4 个 col-md-3 的 id 为“swatch”，然后实际的 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 并且仍然相同。

似乎正在寻找样本，但无法点击。需要让点击继续工作吗？

欢迎任何提示。

谢谢。

标签： javascripthtmlcss

Answer 1

您不能为样本保持相同的 id，也可以使用下面的查询选择器和适当的选择器作为参数并循环遍历样本

var swatchs= document.querySelectorAll(".swatchs");