如何使用queryselectorAll方法獲取多個div ID

Question

我想在click事件上添加功能。 我想顯示無4個DIV但是這個代碼似乎對我不起作用 請告訴我錯在這個

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

Answer 1

查詢選擇是不喜歡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')); 

，你會得到類似

即我正在選擇

現在你可以看到，心不是選擇單一的元素，因此您可以直接進行任何變化

現在，你需要遍歷像阿倫P均元素約翰尼拉告訴

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

Answer 2

的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'; 
}