Question

document.getElementById('navBtn').addEventListener('click', function(){
    document.getElementById('navBtn').style.backgroundColor = 'blue';
    document.getElementById('navBtn').className = document.getElementById('navBtn').className == 'x' ? 'o' : 'x';
    document.getElementById('nav').className = document.getElementById('nav').className == 'x' ? 'o' : 'x';
});

我做错了什么？

Answer 1

您需要将false作为第三个参数添加到addEventListener。大多数情况下，它默认为false，但最好将它放在更安全的一面。

document.getElementById('navBtn').addEventListener('click', function () {
  document.getElementById('navBtn').style.backgroundColor = 'blue';
  document.getElementById('navBtn').className = document.getElementById('navBtn').className == 'x' ? 'o' : 'x';
  document.getElementById('nav').className = document.getElementById('nav').className == 'x' ? 'o' : 'x';
}, false);

.x {
  color: #ccf;
}
.o {
  color: #cfc;
}

<div id="navBtn">Hi</div>
<div id="nav">Bye</div>

建议您在()括号中包含三元条件：

document.getElementById('navBtn').addEventListener('click', function () {
  document.getElementById('navBtn').style.backgroundColor = 'blue';
  document.getElementById('navBtn').className = (document.getElementById('navBtn').className == 'x') ? 'o' : 'x';
  document.getElementById('nav').className = (document.getElementById('nav').className == 'x') ? 'o' : 'x';
}, false);

JavaScript三元语句

1 个答案: