如何选择具有相同类名的 javaScript 中的所有类？

Question

你能帮我解决这个问题吗？ 第一个 div 的 bg-color 只是在改变，但其余的不起作用帮助我解决这个问题！

 const hexNum = [0,1,2,3,4,5,6,7,8,'A','B','C','D','E','F']; const hexBtn = document.querySelector('.btn-hex'); const bgPale = document.querySelector('.bg-color'); const hexCode = document.querySelector('.color-code'); hexBtn.addEventListener('click', getNewHex); function getNewHex(){ let newHexCode = '#'; for (let i = 0; i<6; i++){ let randomHex = Math.floor(Math.random()*hexNum.length); newHexCode +=hexNum[randomHex]; //console.log(newHexCode); } bgPale.style.backgroundColor = newHexCode; hexCode.innerHTML = newHexCode }

 <div class="bg-color palette-1"></div> <div class="bg-color palette-2"></div> <div class="bg-color palette-3"></div>

Answer 1

这里的问题是您正在使用document.querySelector('.bg-color')它返回文档中与指定选择器或选择器组匹配的第一个元素。 您需要在此处实际使用document.querySelectorAll('.bg-color')因为它返回一个 NodeList 表示与指定选择器组匹配的文档元素列表。 然后您还需要遍历每个节点以更改样式，例如：

const bgPale = document.querySelectorAll('.bg-color')
bgPale.forEach(el => el.style.backgroundColor = newHexCode);

欲了解更多信息：

• document.querySelector(selectors)
• document.querySelectorAll(selectors)