Question

<div id="wrap">
  <div id="cube">
    <div id="top"><strong>top</strong></div>
  </div>
</div>
<script>
var cube=document.getElementById('cube'),
    top=document.getElementById('top'),
    wrap=document.getElementById('wrap');
cube.onclick=function(){
    top.classList.toggle("click");
    alert("done");
};
</script>

单击多维数据集时，我想更改类名，但它不起作用

问题出在哪里？我该如何解决？

Answer 1

请勿使用变量top，它是您案例中事件处理程序内window.top ~~的引用~~

var cube = document.getElementById('cube'),
    top_ = document.getElementById('top'),
    wrap = document.getElementById('wrap');
cube.onclick = function() {
    top_.classList.toggle("click");
};

FIDDLE

Answer 2

实际上，您不必重命名变量 - 只需创建一个，好吧，真正本地：

(function(){
var cube = document.getElementById('cube'),
    top = document.getElementById('top'),
    wrap = document.getElementById('wrap');

cube.onclick = function(){
    console.log(top);
    top.classList.toggle("click");
    alert("done");
};
})();

Demo。当然，不同之处在于整个块都包含在IIFE中，因此在其中声明的所有变量都在此函数的范围内定义。换句话说，现在他们非常本地。）

在原始代码段中，所有var语句都放在最外层 - 全局范围内。所以它们由JS处理，就像你试图扩充全局对象的同名属性 - window一样。由于window.top是一个特殊的只读属性，因此实际上不会更改其值。

为什么这个JS代码不能改变类名

2 个答案: