JS变量无法更改元素属性

11 浏览
0 Comments

JS变量无法更改元素属性

快速提问，我今天在练习一些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可以很好地工作，但是尝试更改分配的"classes"变量没有任何效果。我觉得这可能是一个具体性问题，或者是JS无法访问实际属性值，或者是一些类似的初学者错误。

0

3 答案

0 Comments

JS变量无法更改元素属性的原因是，虽然可以将元素的属性值赋给变量，但是将变量的值更改后并不会直接影响到元素的属性值。解决方法是，需要将新的属性值直接赋给元素的属性，即使用e.target.className = colors[i]的方式来更新元素的属性值。

另外，为了减少需要为所有元素添加事件监听器的工作量，可以使用事件委托（Event Delegation）的方式。事件委托允许我们向父元素添加一个监听器，从而捕获子元素的事件，因为事件会在DOM中“冒泡”。通过事件委托，我们只需要为父元素添加一个监听器，就可以处理所有子元素的事件。

下面是一个过于复杂的示例，展示了如何使用事件委托和更新元素属性值：

const colors = ['blue', 'yellow', 'orange', 'red'];
// 首先缓存元素，并为容器添加监听器
const counter = document.querySelector('.index');
const container = document.querySelector('.container');
container.addEventListener('click', handleClick);
let count = 0;
function handleClick(e) {
  // 检查被点击的元素是否是div元素
  if (e.target.matches('.container div')) {
    // 更新计数器元素、className值、以及“box”的文本内容，然后更新计数器的值
    counter.textContent = `Color index: ${count}`;
    e.target.className = colors[count];
    e.target.textContent = colors[count];
    count = count < colors.length - 1 ? ++count : 0;
  }
}

下面是对应的CSS样式：

.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; }

最后是对应的HTML结构：


  

  

  

  




Color index:

0
0 Comments

JS Variable Cannot Change Element Properties

通常情况下，我们可以通过JavaScript代码来改变HTML元素的属性。然而，有时候我们可能遇到一个问题，即无法通过JavaScript变量来改变元素的属性。下面我们来解释这个问题的原因以及解决方法。

在JavaScript中，我们可以通过以下代码来改变元素的属性：

e.target.className = colors[n];

然而，如果我们尝试通过变量来改变元素的属性，可能会遇到问题。例如，下面的代码并不能改变元素的属性：

let classes = e.target.className;

实际上，这段代码只是将`e.target.className`的值赋给了变量`classes`，并没有改变元素的属性。要想改变元素的属性，我们需要将赋值操作反过来：

e.target.className = classes;

这样，`e.target.className`的值就会被改变为`classes`的值。

通过将赋值操作反过来，我们就可以成功改变元素的属性了。希望这个解决方法能帮助你解决类似的问题。

0
0 Comments

JS变量不能更改元素属性的原因是，当使用let classes = e.target.className时，e.target.className按值传递，所以classes包含其数据的副本。更改classes只会更改副本，而不会更改存储在e.target.classname中的内容。

解决方法是直接更改e.target.classname，而不是将其赋值给变量再更改变量的值。

以下是修正后的代码示例：

e.target.className = 'new-class';

这样，e.target.classname的值将被直接修改为'new-class'。

感谢！我更了解了变量声明更多是作为"别名"或缩写常用公式的方式，但我想这并不是它的工作方式。

0