我正在尝试使用 JavaScript 在被选中后更改元素的背景颜色，并确保一次只有一个元素具有特定的背景颜色。一旦用户选择了不同的元素，我希望之前选择的元素被不同的背景颜色替换。目前我只能通过选择每个元素来切换单个元素。我需要能够选择一个元素并应用新的背景颜色，然后让 JavaScript 将先前事件元素的背景颜色更改为不同的颜色(少点击一次)。
我正在尝试做的事情与现代导航栏或列表项非常相似，其中一次只有一个元素是“事件的”，并且具有与同一 div、行等中的其他元素不同的背景颜色。
关于我的工作的注意事项我正在使用 bootstrap，不想在这个特定元素中使用 jQuery。
CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h4 {
border: 1px solid black;
border-radius: 8px;
padding: 10px 2px 10px 2px;
margin: 20px 20px 0px 20px;
background-color: #F0F0F0;
border-color: #F8F8F8;
color: #505050;
cursor: pointer;
}
.active {
background-color: #99E6FF;
}
</style>
</head>
</html>
HTML:
<div id="pTwoRowOne">
<div class="row">
<div class="col-md-4 row row-centered">
<h4 id="techBio" class="test">Biology</h4>
</div>
<div class="col-md-4 row row-centered">
<h4 id="techCart" class="test">Cartography</h4>
</div>
<div class="col-md-4 row row-centered">
<h4 id="techChem" class="test">Chemistry</h4>
</div>
</div>
</div>
JavaScript:
document.getElementById("techBio").onclick=function() {
document.getElementById("techBio").classList.toggle('active');
}
document.getElementById("techCart").onclick=function() {
document.getElementById("techCart").classList.toggle('active');
}
document.getElementById("techChem").onclick=function() {
document.getElementById("techChem").classList.toggle('active');
}
可以在这里看到一个例子:http://jsbin.com/fugogarove/1/edit?html,css,js,output
如果需要澄清，请告诉我。
最佳答案
是的，非常简单。
假设
- 您没有尝试支持 IE8，因为您使用的是
classList - 您可以将元素作为变量存放，而不是反复查询 DOM。
示例
代码
我重写了您的 JavaScript 以使其更清晰一些并使其干燥一点:
var techs = [].slice.call(document.querySelectorAll('#pTwoRowOne h4'));
function set_active(event) {
techs.forEach(function(tech){
if (event.target == tech) { return; }
tech.classList.remove('active');
});
event.target.classList.toggle('active');
}
techs.forEach(function(item) {
item.addEventListener('click', set_active);
});
一些解释
[].slice.call(document.querySelectorAll('#pTwoRowOne h4')); – 我们使用它来将 NodeList 的输出更改为一个数组。这允许我们稍后使用 forEach。 querySelectorAll 返回一个 NodeList，其中包含与 CSS 选择器匹配的所有元素。根据您的环境，您可能可以用更好的 CSS 选择器替换它。
addEventListener 是一种比通过 onclick += 迭代添加绑定(bind)事件监听器更好的方法。这也是 ECMA5 及更高版本中推荐的方式(据我所知)。
通过将元素查询设置为变量，您将能够将引用保存在内存中，而不是每次都轮询 DOM 来更改元素。这将使您的 JavaScript 稍微快一些，并且它再次只是它生成的代码的一个更好、更干净的版本。
更新
我修改了 JS 以使其更有意义。
关于javascript - 如何使用 JavaScript 改变多个元素的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30605403/