Question

我有两个css选择器链接到一个html元素。 Onmousedown javascript应该将类更改为'closeMenuButtonActive'并且onmouseup它应该等待500ms然后将类名更改为'closeMenuButtonNotActive'。 由于某些原因，此代码无法正常运行！ 我尝试alert(this.className);看看发生了什么，警报说正确的closeMenuButtonNotActive。奇怪的是， 我查看了检查器中的元素，并且类名没有改变！ 这是我的内联javascript代码：

<div id="closeMenuButton" class="closeMenuButtonNotActive" onmousedown="this.className = 'closeMenuButtonActive';" onmouseup="window.setTimeout(function(){this.className = 'closeMenuButtonNotActive';},500);">

Answer 1

那是因为this在此功能上引用了window：

window.setTimeout(function() {
  // Wrong this
  this.className = 'closeMenuButtonNotActive';
},500);

相反，你可以做到

 var elem = this;
 window.setTimeout(function() {
  elem.className = 'closeMenuButtonNotActive';
},500);

如果您不想污染全球范围：

(function(elem) {
   window.setTimeout(function() {
    elem.className = 'closeMenuButtonNotActive';
  },500);
)(this);

无论如何，为了防止难以调试的其他问题，你应该考虑至少使用HTML <div onmouseup="doStuff(this)">中的函数并从javascript代码定义doStuff。或者更好的是，添加鼠标事件监听器指令from the code。

Answer 2

你应该用“bind”来调用你的函数来保持“this”的范围。

window.setTimeout(
function(){
    this.className = 'closeMenuButtonNotActive';
}.bind(this),
500);

Javascript类名操作不起作用

2 个答案: