我想让第一扇门在我点击第一个按钮的5秒后消失。然后是第二扇门,第三扇门...一个接一个。所以我应该在函数toogleDoor中添加代码。
我尝试使用JQuery,但失败了。
你有什么建议吗?
'
<div class="backDoor">
<div class="door5" id="door5">
<div class="door4" id="door4">
<div class="door3" id="door3">
<div class="door2" id="door2">
<div class="door1" id="door1">
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<input type="text" id="parola"></input>
<button id="button1" onclick="toggleDoor(1)">
Apri prima porta
</button>
<button id="button2" onclick="toggleDoor(2)">
Apri seconda porta
</button>
<button id="button3" onclick="toggleDoor(3)">
Apri terza porta
</button>
<button id="button4" onclick="toggleDoor(4)">
Apri quarta porta
</button>
<button id="button5" onclick="toggleDoor(5)">
Apri quinta porta
</button>
<script>
function toggleDoor(door) {
// Find the proper door
element = document.querySelector('.door' + door); // With constructed reference
if (element) { // does the door exist?
if (checkParola(door)) { // proper password?
element.classList.toggle("openDoor");
// Here I want to make the selected door to dissapear after 5 seconds
};
};
};
'
3条答案
按热度按时间yizd12fk1#
你可以使用setTimeout()来使门消失,只需要在类中使用一个箭头函数来切换类。
这将在5000毫秒(5秒)后提示类更改。在CSS的openDoor类中,必须使用display:none;或可见性:隐藏;以使上述代码正常工作。
31moq8wy2#
您可以尝试使用setTimeout函数。
x6yk4ghg3#
这个想法还不够清楚,我不明白你到底想做什么,如果每扇门都有自己的按钮和功能,为什么你要把div嵌套在其他的里面.
但是...
如果要在一段时间后应用任何函数,可以使用
setTimeout()
方法,该方法有两个参数,第一个是函数,第二个是以毫秒为单位的时间:如果你想传递参数给你的函数,你可以这么做:
如果它误解了你的问题,请多解释一下,以便能有所帮助。