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

Question

你能帮我解决这个问题吗？第一个 div 的背景颜色仅发生变化，但其余部分不起作用帮助我解决这个问题!

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)