Question

在我的笔中，我想在每次点击一扇门后刷新我的页面。不确定我应该放弃window.location.reload（）;

这是笔

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");
        }
    }

谢谢！

Answer 1

如果您想要将随机图像放在门后，最简单的方法是为divs创建一系列具有背景图像的CSS类，然后将这些类名保存在JS中的数组中。然后，当您点击一扇门时，您会随机选择该阵列中的一个项目并按照您应用＆＃34;打开的门＆＃34;的方式应用该课程。效果。

Answer 2

我想你想在重新加载页面之前完成开门动画。您可以使用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();
        });
    }
}

使用JavaScript OnClick刷新页面

2 个答案: