javascript - if/else 语句显示/隐藏图像

Question

函数应该是这样的:如果核心模块提供的变量的整数值大于 0，那么应该显示图像，否则应该保持隐藏。

如果我在我的 *.js 文件中写下 Core 模块的构造: data.truck.retarderBrake(整数)。然后核心模块将返回当前的整数值。

所以我的“伪代码”看起来像这样:

if (data.truck.retarderBrake>0) {
    show.image ('images/RetarderON.png');
    } else {
    hide.image ('images/RetarderON.png');
}

在我的 HTML 代码中，我有一个图像声明:

    <div class="RetarderOn"></div>

CSS 看起来像这样:

.RetarderOn {
  background-image: url("images/RetarderON.png");
  position: absolute;
  left: 851px;
  top: 13px;
  width: 92px;
  height: 71px;
  visibility: hidden;
}

我可以这样做吗？ JS if 语句的正确语法是什么。也许我可以在 JS 文件而不是 CSS 文件中定义图像的所有属性？

Answer 1

您可以通过其 style 对象为该特定元素设置 visibility 属性；你可以通过 querySelector 找到元素(如果我假设只有其中一个)，它接受任何有效的 CSS 选择器并返回第一个匹配项:

document.querySelector(".RetarderOn").style.visibility = data.truck.retarderBrake > 0 ? "visible" : "hidden";

如果有多个匹配，使用querySelectorAll并从生成的 NodeList 中选择相关的一个。