Question

我对JS很新，并且想知道，如果有一种更清晰的方式来编写这段代码吗？

我正在尝试创建一个显示或隐藏div的按钮，具体取决于它当前是否显示。

非常感谢提前

安

var button = document.getElementById('button');
var hideText = document.getElementById('output').className = 'hide';

button.addEventListener('click', ()=>{
    if(hideText){
        document.getElementById('output').className = 'unhide';
        hideText = false;
    }else{
        document.getElementById('output').className = 'hide';
        hideText = true;
    }
})

CSS

.hide{display: none;}

.unhide{display: block;}

Answer 1

您只需切换课程

即可

button.addEventListener('click', () => {
    document.getElementById('output').classList.toggle('hide');
}

Answer 2

只需使用一个类（例如unhide）并默认使其不可见。然后做

button.addEventListener('click', () => {
    document.getElementById('output').classList.toggle('unhide');
}

Answer 3

如果你实现这样的

，你可以删除额外的变量hideText以及额外的css

var x = document.getElementById("output");
if (x.style.display === "none") {
    x.style.display = "block";
} else {
    x.style.display = "none";
}

在jquery中，还有其他更简单的方法，例如toggle，hide，show。

创建一个显示或隐藏div的按钮，具体取决于它当前是否显示

3 个答案: