[英]Refresh Page with JavaScript OnClick
Within my pen, I'd like to refresh my page after each click of a door. 在我的笔中,我想在每次单击门后刷新页面。 Not sure where I should drop the window.location.reload(); 不知道我应该在哪里放置window.location.reload();
Here's the pen 这是笔
https://codepen.io/tacodestroyer/pen/bROpeQ https://codepen.io/tacodestroyer/pen/bROpeQ
function openDoor(field) {
var y = $(field).find(".thumb");
var x = y.attr("class");
if (y.hasClass("thumbOpened")) {
y.removeClass("thumbOpened");
}
else {
$(".thumb").removeClass("thumbOpened");
y.addClass("thumbOpened");
}
}
Thanks! 谢谢!
If you're wanting to put random images behind the door, the easiest way would be to create a series of CSS classes for divs
that have background images then keep those classnames within an array in your JS. 如果要在门后放置随机图像,最简单的方法是为具有背景图像的divs
创建一系列CSS类,然后将这些类名保留在JS数组中。 Then when you click on a door, you randomly choose one of the items in that array and apply that class the way you're applying the "open door" effect. 然后,当您单击一扇门时,您会随机选择该数组中的一项,然后以应用“开门”效果的方式来应用该类。
I suppose you want the opening-door animation to complete before reloading the page. 我想您希望在重新加载页面之前完成开门动画。 You could use the transitionend
event for that: 您可以为此使用transitionend
事件:
function openDoor(field) {
var y = $(field).find(".thumb");
var x = y.attr("class");
if (y.hasClass("thumbOpened")) {
// NB: This might never happen given that you reload the page once you open a door
y.removeClass("thumbOpened");
}
else {
$(".thumb").removeClass("thumbOpened");
y.addClass("thumbOpened");
// Wait for the animation to end:
$(".thumb").on("transitionend", function() {
// ... and then reload, or do whatever else you want to happen next
window.location.reload();
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.