javascript - 切换后重置 div 值

Question

所以我在两个 div 之间切换以显示轮到谁在井字游戏中使用此代码块

function whosTurn() {
    container.addEventListener('click', () => {
        firstturn.style.display = (
            firstturn.style.display == "none" ? "block" : "none");
        secondturn.style.display = (
            secondturn.style.display == "none" ? "block" : "none");
    })
}
whosTurn()

我想出了这个方法来重置 div 以在单击重置按钮时显示 #firstturn

function resetDiv() {
    reset.addEventListener("click", () => {
        $(document).ready(function () {
            if ($('#secondturn').length > 0) {
                $('#secondturn').replaceWith($('#firstturn'));
            }
        })

    })
}
resetDiv()

但是当我尝试 .replaceWith "#firstturn"时这似乎不起作用，但是当我创建一个新的不同 div 并将其放在 firstturns 位置时(只是作为测试)它确实起作用。

我不确定是否是第一段代码中的某些内容导致了它，但我们将不胜感激任何帮助!

Answer 1

无需替换，您只需执行显示/隐藏逻辑(先显示，再隐藏)。

但我强烈建议使用类或数据属性并使用 css 进行样式设置。如果您需要这方面的帮助，请告诉我。