Javascript 为什么不触发此else语句？

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

我试图查找div的z指数，并用if/else语句决定z指数应该更高还是更低。但是由于某些原因，没有触发else，它似乎只运行if语句

下面的代码是我试图查找z索引是否低于或高于5（它们只能是0或10，但这似乎是一个很好的简单方法来进行检查）。问题是，即使z-index变为10，仍然会执行ifs语句而不是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');
});
}

if（$（“.div1”）.css（“z-index”）<“5”）{//z-index小于5吗？设为10
$（“.div1”）。单击（函数（）{
$（this.css（'z-index'，'10'）；
console.log（'block1 if'）；
});
}否则{//z-索引大于5吗？设为0
$（“.div1”）。单击（函数（）{
$（this.css（'z-index'，'0'）；
console.log（'block1-else'）；
});
}

我完全不知道是什么问题，所以欢迎大家帮忙。

---

感谢您抽出时间阅读我的问题

您的

if

语句比较的是字符串，而不是数字。。。下面是它们应该是什么样子

if (parseInt($(".div1").css("z-index")) < 5) { 

if（parseInt（$（“.div1”）.css（“z-index”））<5{

if语句比较的是字符串，而不是数字……下面是它们的外观

if (parseInt($(".div1").css("z-index")) < 5) { 

if（parseInt（$（“.div1”）.css（“z-index”））<5{

我不知道这是否解决了您的问题，但我认为您应该将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'));
   });

$（“.div1”）。单击（函数（）{
if（$（this.css（“z-index”）<5）
{
$（this.css（'z-index'，'10'）；
}
否则{
$（this.css（'z-index'，'0'）；
}
log（$（this.css（'z-index'））；
});

我不知道这是否解决了您的问题，但我认为您应该将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'));
   });

$（“.div1”）。单击（函数（）{
if（$（this.css（“z-index”）<5）
{
$（this.css（'z-index'，'10'）；
}
否则{
$（this.css（'z-index'，'0'）；
}
log（$（this.css（'z-index'））；
});

您正在比较字符串：

if (parseInt($(".div1").css("z-index")) < 5) {

if（parseInt（$（“.div1”）.css（“z-index”））<5）{

您正在比较字符串：

if (parseInt($(".div1").css("z-index")) < 5) {

if（parseInt（$（“.div1”）.css（“z-index”））<5）{

我认为这是因为您将Int与String进行比较

例如：

如果您

css

是

z-index:10

并且您将其与

“5”

进行比较，那么它的意思是您将int与string进行比较

像这样10<“5”

---

这就是为什么你的else条件没有触发的原因，我认为这是因为你将Int和String进行比较

例如：

如果您

css

是

z-index:10

并且您将其与

“5”

进行比较，那么它的意思是您将int与string进行比较

像这样10<“5”

---

这就是为什么else条件不会触发的原因。您总是将z索引设置为相同的静态值，而不管单击元素时它们是什么。查看您的单击处理程序：

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

因此，每当单击

.div1

时，其z索引将始终静态设置为

'10'

。我怀疑您是想在单击处理程序中进行比较：

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

$（'.div1'）。单击（函数（）{
if（$（this.css（'z-index'）<'5'））{
$（this.css（'z-index'，'10'）；
console.log（'block1 if'）；
}否则{
$（this.css（'z-index'，'0'）；
console.log（'block1-else'）；
}
});

---

---

此外，您正在比较字符串而不是数字。作为参考，

“10”

实际上小于

“5”

。但是，

10

大于

5

。您可能需要比较数字。

您总是将z索引设置为相同的静态值，而不管单击元素时它们是什么。查看您的单击处理程序：

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

因此，每当单击

.div1

时，其z索引将始终静态设置为

'10'

。我怀疑您是想在单击处理程序中进行比较：

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

$（'.div1'）。单击（函数（）{
if（$（this.css（'z-index'）<'5'））{
$（this.css（'z-index'，'10'）；
console.log（'block1 if'）；
}否则{
$（this.css（'z-index'，'0'）；
console.log（'block1-else'）；
}
});

---

---

此外，您正在比较字符串而不是数字。作为参考，

“10”

实际上小于

“5”

。但是，

10

大于

5

。您可能需要比较数字。

更好的方法

Javascript代码

HTML

A.
B
C

更好的方法

Javascript代码

HTML

A.
B
C

拿出你的$（“.div1”）.css（“z-index”）和控制台。注销，确保你得到了你想要的。另外，“5”是字符串，你需要整数吗？因为“10”比“5”小。唉……这是一个愚蠢的错误，但即使我更改了“5”到了5岁，其他的还没有triggered@HagelslagBMB：不会触发

else

，因为对其求值的一次，当页面加载时，

if

解析为

true

。此代码中的

if

条件在页面加载时只求值一次，然后再也不会求值。使用$（“.div1”）.css(“z-index”）和console.log退出，确保您得到了预期的结果。另外，“5”是一个字符串，可以吗