Question

我在文档的顶部有这个

var set = document.querySelector("#container");
set.style.display = isSet;

isSet是“无”或“阻止”。

我想在这里覆盖它

function mainUpdate(type) {
if (type == "music") {
isplaying ? document.querySelector("#container").style.display = block : document.querySelector("#container").style.display = isSet;

但是，当isSet默认为“ none”时，在mainUpdate函数中不会将其更改为“ block”。如果删除文档顶部的代码，它将在mainUpdate类型中显示一个奇怪的动画，该动画从块变为无。因此，基本上我希望#container的默认样式为“ none”或“ block”，在mainUpdate函数中，我想在isplaying为true时将样式更改为“ block”，否则应该回到isSet，该如何实现？

Answer 1

首先，block必须是字符串。否则，它将搜索未定义的变量block。其次，在命名由2个或更多单词组成的变量时，应使用'camelCase'，例如isplaying应该是isPlaying。

第三，如果您将set声明为全局变量，为什么不在函数中也使用它呢？使代码更具可读性。

第四，使用let和const进行变量声明。在声明-> let and const下阅读此处，您可以阅读有关let const vs var

的一些文章

我举了一个简单的例子，首先单击isPlaying，然后单击按钮，将false变成true。

见下文

const isSet = 'none'
const set = document.querySelector("#container");
const button = document.querySelector("button");
let isPlaying = false;
set.style.display = isSet;
button.onclick = function() {
  isPlaying = true
  isPlaying ? set.style.display = 'block' : set.style.display = isSet;
}

#container {
  width: 100px;
  height: 100px;
  background: red;
}

<div id="container">

</div>
<button>
Click to show the container
</button>

覆盖JavaScript中的样式显示

1 个答案: