如何使用queryselectorAll方法获取多个div id

Question

我想在点击事件上添加一项功能。 我想显示没有四个div但这个代码似乎对我不起作用 请告诉我这个错误

<a class="lightbox-close" href="#" onclick="document.querySelectorAll('#goofy_1,#goofy_2,#goofy_3,#goofy_4').style.display = 'none';"></a>

Answer 1

querySelectorAll返回NodeList，您需要对其进行迭代并设置属性。

因此，编写一个可以编写迭代逻辑

的单独函数会更好

var els = document.querySelectorAll('#goofy_1,#goofy_2,#goofy_3,#goofy_4');
for (var i = 0; i < els.length; i++) {
    els[i].style.display = 'none';
}

Answer 2

查询选择器与jQuery选择器不同，您可以在其中执行

$('#goofy_1,#goofy_2,#goofy_3,#goofy_4')// it will get you all div selected 

而不是查询选择器返回nodeList，这意味着你得到了

尝试登录您的querySelectorAll

 console.log( querySelectorAll('#goofy_1,#goofy_2,#goofy_3,#goofy_4'));

你会得到像

这样的东西

即我正在选择

  

现在您可以看到没有选择单个元素，因此您可以直接进行任何更改

现在你需要遍历所有元素，如 Arun P Johny 告诉

var allElements = document.querySelectorAll('#goofy_1,#goofy_2,#goofy_3,#goofy_4');
for (var i = 0; i < els.length; i++) {
    allElements [i].style.display = 'none';
}

好读

Difference between HTMLCollection, NodeLists, and arrays of objects