Question

在我的页面上，我有一个警报。理想的行为是，当用户单击关闭按钮时，该元素将消失，并且浏览器的会话存储中的某个键将被激活，以防止其再次出现。

但是，发生的事情是会话存储密钥始终处于放置状态-不管用户是否单击关闭按钮。我如何才能只在用户单击按钮时放置它？

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        let dismissed = sessionStorage.getItem("dismissed");
        let alertDiv = document.getElementById("alert");
        let dismissButton = document.getElementById("dismiss");
        if (!dismissed) {
            alertDiv.classList.remove("off");
        }

        dismissButton.addEventListener("click", function() {
            alertDiv.classList.add("hide");
        });

        alertDiv.addEventListener("transitionend", function({
            target
        }) {
            if (target.classList.contains("hide")) {
                target.classList.add("off");
            }
            sessionStorage.setItem("dismissed", true);
        });
    });

</script>

<div class="ddAlert off" id="alert">
    <span class="ddAlertBtn" id="dismiss">&times;</span>
    <h5>Text</h5>
    <p>Text</p>
    <a class="ddBtn black" href="#" target="_blank">Button</a>
</div>

Answer 1

根据transitioned event specifications，每当事件目标上的CSS转换完成时，事件就会触发。我无法从您的代码中看出来，但是在加载警报div时您可能正在发生过渡。

无论哪种方式；您可能应该在click事件处理程序中设置sessionStorage键，而不要在转换后的处理程序中设置。这样一来，您可以确保仅根据需要设置点击次数。

会话存储始终处于激活状态

1 个答案: