我有两个变量，每个变量有多个div ID。默认情况下，其中一个变量需要隐藏。然后，当使用 addeventlistener 单击类时，变量将交换可见性。
var click1 = document.getElementsByClassName('buffalo');
var click2 = document.getElementsByClassName('tiger');
var hide1 = ['widget2', 'widget4', 'widget6', 'widget8', 'widget10', 'widget12'];
var hide2 = ['widget1', 'widget3', 'widget5', 'widget7', 'widget9', 'widget11'];
在上面的代码中，我需要默认隐藏 var hide2。所以唯一显示的小部件是var hide1。
当用户单击 var click1 时，应该不会发生任何事情，因为该按钮的小部件已经显示。
当用户单击 var click2 时，var hide 2 小部件应变为可见，变量隐藏 1 小部件应隐藏。
然后，如果用户单击 var click1，var hide 1 小部件应该变得可见，var hide 2 小部件应该被隐藏。
我已经尝试过.toggle，但是，我需要将其严格保留在javascript中。
这是我一直在玩的代码，
click1.addEventListener('click', function() {
for(i = 0; i < hide1.length; i++) {
if (document.getElementById(hide2[i]).style.display == "block") {
document.getElementById(hide2[i]).style.display = "none";
document.getElementById(hide1[i]).style.display = "block";
}
}
})
click2.addEventListener('click', function() {
for(i = 0; i < hide2.length; i++) {
if (document.getElementById(hide1[i]).style.display == "block") {
document.getElementById(hide1[i]).style.display = "none";
document.getElementById(hide2[i]).style.display = "block";
}
}
});
如果您愿意稍微重新安排您的流程，我认为这可能会起作用 按类名收集div，然后对于每个元素，切换"隐藏"类。我测试了以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.hide {
display: none;
}
</style>
<script>
window.addEventListener("load", function() {
var click1 = document.getElementsByClassName("buffalo");
var click2 = document.getElementsByClassName("tiger");
[].forEach.call(click1, element => {
console.log(element.innerHtml);
element.classList.toggle("hide");
});
var hideb = document.getElementById("hideB");
hideb.addEventListener("click", function() {
[].forEach.call(click1, element => {
element.classList.toggle("hide");
});
[].forEach.call(click2, element => {
element.classList.toggle("hide");
});
});
});
</script>
</head>
<body>
<button id="hideB">toggle</button>
<div class="buffalo">widget1</div>
<div class="buffalo">widget3</div>
<div class="buffalo">widget5</div>
<div class="buffalo">widget7</div>
<div class="buffalo">widget9</div>
<div class="buffalo">widget11</div>
<div class="tiger">widget2</div>
<div class="tiger">widget4</div>
<div class="tiger">widget6</div>
<div class="tiger">widget8</div>
<div class="tiger">widget10</div>
<div class="tiger">widget12</div>
</body>
</html>
好的，重构了代码，没有对HTML进行任何更改：
window.addEventListener("load", function() {
var click1 = document.getElementsByClassName('buffalo');
var click2 = document.getElementsByClassName('tiger');
var hide1 = ['widget2', 'widget4', 'widget6', 'widget8', 'widget10', 'widget12'];
var hide2 = ['widget1', 'widget3', 'widget5', 'widget7', 'widget9', 'widget11'];
[].forEach.call(click1, element => {
element.addEventListener('click', function() {
for(i = 0; i < hide1.length; i++){
if (document.getElementById(hide2[i]).style.display == "block") {
document.getElementById(hide2[i]).style.display = "none";
document.getElementById(hide1[i]).style.display = "block";
}
}
});
});
[].forEach.call(click2, element => {
element.addEventListener('click', function() {
for(i = 0; i < hide2.length; i++){
if (document.getElementById(hide1[i]).style.display == "block") {
document.getElementById(hide1[i]).style.display = "none";
document.getElementById(hide2[i]).style.display = "block";
}
}
});
});
}(;