javascript - 为什么这个else语句没有被触发？

Question

我一直在尝试让一个 div 在一次单击时位于另一个 div 的后面，并在下次单击时位于该 div 的顶部。例如，当 div1 在 div2 后面并且您单击 div1 时，它应该出现在 div2 前面。当您再次单击 div1(现在位于 div2 前面)时，它应该再次位于 div2 后面。

我正在尝试查找 div 的 z 索引，并使用 if/else 语句确定 z 索引应该更高还是更低。但由于某种原因，else 没有被触发，它似乎只运行 if 语句。

The jsfiddle

下面的代码是我试图查找 z-index 是否低于或高于 5 的地方(它们只能是 0 或 10，但这似乎是一个很好的万无一失的检查方法)。问题是，即使 z-index 变成 10，if 语句仍然会被执行，而不是 else。

if ($(".div1").css("z-index") < "5") { //is z-index smaller then 5? make it 10
   $(".div1").click(function() {
      $(this).css('z-index', '10');
      console.log('block1 if');
   });
} else { //is z-index bigger then 5? make it 0
   $(".div1").click(function() {
      $(this).css('z-index', '0');
      console.log('block1 else');
});
}

我完全不知道问题是什么，所以欢迎所有帮助。 感谢您花时间阅读我的问题!

Answer 1

我不知道这是否可以解决您的问题，但我认为您应该将 if/else 移动到单个单击事件中。也像其他人所说的那样，您需要与 int 而不是字符串进行比较

  $(".div1").click(function() {
      if ($(this).css("z-index") < 5)
      {
        $(this).css('z-index', '10');
      }
      else{
        $(this).css('z-index', '0');
      }
      console.log($(this).css('z-index'));
   });