JS 变量不能改变元素属性

Question

在这里快速提问，我今天在练习一些JS时遇到了这个问题。 我想创建一个基本原型以在单击时循环遍历“div”背景颜色数组，但我意识到将元素属性分配给变量（而不是使用事件目标）会阻碍我更改实际值。

这是JS代码：

let colors = ["blue", "yellow", "orange", "red"]
let n = 1;

document.querySelectorAll('div').forEach(occurence => {
    occurence.addEventListener('click', (e) => {
        let classes = e.target.className;
        classes = colors[n];
        n++;
        console.log(classes);
        if (n >= 4) {n = 0;}
    });
});

所以，改变实际的e.target.className工作得很好，但试图改变分配的“类”变量什么都不做。 我觉得这可能是一个具体问题，或者 JS 无法访问实际的属性值，或者是一些类似的初学者错误。

Answer 1

当您let classes = e.target.className时， e.target.className按值传递，因此classes包含其数据的副本。 更改classes只会更改副本，而不是存储在e.target.classname中的内容。

Answer 2

实际上，您并没有更改e.target.className的值。 您所做的是将e.target.className的值分配给 variable/let-binding classes 。 要将其中一个颜色值分配给className属性，分配必须相反：

e.target.className = colors[n];

Answer 3

let classes = e.target.className将className的当前字符串值分配给classes 。 虽然您可以将新颜色值分配给不会将新颜色值分配给元素的className属性的classes 。 为此，您要明确分配它： e.target.className = colors[i] 。

您可能还希望消除向所有元素添加事件侦听器的需要。 事件委托允许您向父元素添加一个侦听器，该侦听器从其子元素“冒泡”DOM 时捕获事件。

这是一个过度劳累的例子：

 const colors = ['blue', 'yellow', 'orange', 'red']; // Cache the elements first, and add a listener to // the container const counter = document.querySelector('.index'); const container = document.querySelector('.container'); container.addEventListener('click', handleClick); let count = 0; function handleClick(e) { // Check to see if the element that was clicked // was a div element if (e.target.matches('.container div')) { // Update the counter element, the `className` value, // and the `textContent of the "box", and then update // the count value counter.textContent = `Color index: ${count}`; e.target.className = colors[count]; e.target.textContent = colors[count]; count = count < colors.length - 1? ++count: 0; } }

 .container { display: grid; gap: 0.4em; grid-template-columns: repeat(2, 50px); }.container div { display: flex; justify-content: center; align-items: center; height: 50px; width: 50px; border: 1px solid lightgray; }.container div:hover { cursor: pointer; border: 1px solid darkgray; }.blue { background-color: lightblue; }.yellow { background-color: #ffff00; }.orange { background-color: darkorange; }.red { background-color: red; }.index { margin-top: 0.5em; }

 <div class="container"> <div></div> <div></div> <div></div> <div></div> </div> <div class="index">Color index:</div>