Question

我一直试图让div获得一次点击后面的另一个div，并在下一次点击时在div的顶部。因此，例如当div1位于div2后面并且单击div1时，它应该出现在div2的前面。当您再次单击div1（现在位于div2之前）时，它应该再次落后于div2。

我试图查找div的z-index，并使用if / else语句判断z-index应该更高还是更低。但由于某种原因，其他因素没有被触发，它似乎只能运行if语句。

The jsfiddle

下面的代码是我试图查看z-index是低于还是高于5的地方（它们只能是0或10但这似乎是一个很好的万无一失的方法来进行检查）。问题是，即使将z-index变为10，if语句仍然被执行而不是其他。

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而不是一个字符串

   public int Length {get {return myList.Count; }}

Answer 2

您的if语句会比较字符串，而不是数字......这是它们的外观。

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

Answer 3

您正在比较字符串：

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

Answer 4

您始终将z-index设置为相同的静态值，无论单击该元素时它们是什么。看看你的点击处理程序：

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

因此，只要点击.div1，其z-index将始终静态设置为'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');
    }
});

此外，您还要比较字符串而不是数字。作为参考，"10"实际上小于 "5"。但是，10大于5。您可能想要比较数字。

Answer 5

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

示例：

如果css为z-index:10，并将其与"5"进行比较，则表示您将int与字符串进行比较。

like this 10 < "5"

这就是为什么你的其他条件不会触发

的原因

Answer 6

更好的方法

Javascript代码

  $(".zIndex").click(function() {       
    if($(this).css('z-index') > 0){         
        $(".zIndex").css('z-index', '10');                
        $(this).css('z-index', '0');
  }
  else{
        $(".zIndex").css('z-index', '0');
        $(this).css('z-index', '10');        
  }
});

<强> HTML

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="zIndex div1" style="z-index: 0;">A</div>
  <div class="zIndex div2" style="z-index: 0;">B</div>
  <div class="zIndex div3" style="z-index: 0;">C</div>

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

6 个答案: