有3个容器类
两个退出按钮可在各自的容器中查看,单击后,它们会将您带到不同的容器。
<div class="container1"></div>
<div class="container2 hide"></div>
<div class="container3 hide"></div>
我正在编写的代码。
如何写得更好?
如何改进?
https://jsfiddle.net/an23j14r/
function exitClickHandler(e) {
if (e.target.classList.contains("exit")) {
document.querySelector(".container2").classList.add("hide");
document.querySelector(".container3").classList.add("hide");
document.querySelector(".container1").classList.remove("hide");
console.log('Page1');
}
if (e.target.classList.contains("exitPage2")) {
document.querySelector(".container1").classList.add("hide");
document.querySelector(".container3").classList.add("hide");
document.querySelector(".container2").classList.remove("hide");
console.log('Page2');
}
if (e.target.classList.contains("exitPage3")) {
document.querySelector(".container2").classList.add("hide");
document.querySelector(".container1").classList.add("hide");
document.querySelector(".container3").classList.remove("hide");
console.log('Page3');
}
window.scrollTo(0, 0);
}
下面是退出按钮,它们转到它们在代码中所转到的相应CSS类。
你可以点击一个按钮,它会把你带到一个特定的CSS类/页面。
有3个容器类,当点击2个按钮中的1个时,2个容器类应隐藏,其中1个可见。
<div class="container1">
<button class="exit exitpPage2" type="button"></button>
<button class="exit exitpPage3" type="button"></button>
</div>
<div class="container2 hide">
<button class="exit" type="button"></button>
<button class="exit exitpPage3" type="button"></button>
</div>
<div class="container3 hide">
<button class="exit" type="button"></button>
<button class="exit exitpPage2" type="button"></button></div>
当点击按钮时,每个容器/页面将被取消隐藏,而其他容器/页面将保持隐藏。
当点击.container1
附带的退出按钮时,.container2
和.container3
应隐藏。
当点击.container2
附带的退出按钮时,.container1
和.container3
应隐藏。
点击.container3
附带的退出按钮时,.container2
和.container1
应隐藏。
下面是我的代码示例:
第一个
1条答案
按热度按时间avkwfej41#
如果你想要一个类似于旋转木马的东西,你只需要在每个容器外面的两个按钮来控制容器的索引。索引从0开始,然后根据点击的按钮改变±1步。
toggleContainer()
检查容器的索引是否超出反弹范围(小于0或大于容器数)。hideAllContainersBut()
循环遍历容器“array”,并隐藏除当前索引之外的所有容器。第一个