Question

当用户单击某个元素时，正在调用的if语句存在问题。下面是该元素的代码：

<div id="dropdown" onclick="dropper()" class="YearEvents_2016">
    <h1>2016</h1>
</div>

函数“ dropper（）”的代码：

function dropper() {
var x = document.getElementById('dropdown');
var y = document.getElementById('YearEvents');

if (x.style.height === "14vh") {
    x.style.height = "75vh";
    y.style.height = "100vh";
} else {
    x.style.height = "14vh";
    y.style.height = "40vh";
}

}

当用户单击元素时，代码将运行，并且x和y变量将更改。但是，再次单击元素时（为了将x变量的高度再次降低到14），什么都没有发生，尽管语句的其他部分描述了应该发生的情况。

不确定它是否完全显而易见；我的Java语言没有那么先进。我们将非常感谢您提供有关在再次单击该元素时为何该功能不再运行的帮助。

编辑与x高度减小（来自else语句）类似，y变量的大小也不减小。是否有办法使x和y的更改都在同一条语句中起作用，并且是否有办法延迟y减小的执行，以使x元素的大小在y减小之前稍微减小？再次感谢您的帮助。

TL； DR，两个元素x和y的大小在第一次运行时都会增加，然后x＆y的大小在第二次运行时都会减小，但是y的大小在x之后会稍微减小。

Answer 1

使用if语句时，您需要使用两个等于==（或三个等于严格相等===）来检查左侧是否等于右侧。目前，您正在为变量分配一个值，而不检查是否相等。因此，您需要将if语句更改为以下内容：

if (x.style.height === "14vh") {

请参见下面的工作示例：

function dropper() {
  var x = document.getElementById('dropdown');
  if (x.style.height === "14vh") {
    x.style.height = "75vh";
  } else {
    x.style.height = "14vh";
  }
}

#dropdown {
  background: #FF0000;
  font-size: 20px;
  height: 75vh;
}

<div id="dropdown" onclick="dropper()" class="YearEvents_2016">
  <h1>2016</h1>
</div>

如果语句仅运行一次OnClick？

1 个答案: