Javascript 如何切换z索引值以使图像显示在前面或背景中？

我有许多相互重叠的图像，我试图使所选图像在单击功能时显示在前面或背景中。页面加载时，除了最上面的图像（image1）外，图像的切换工作正常

当第一次加载页面时，如果单击最上面的图像，它应该隐藏在第二个图像后面。但这并没有发生，因为所有图像的z索引最初都设置为0

期望：当我单击最上面的图像时，它应该隐藏，并且切换应该适用于所有图像

jQuery

切换图像z索引值的代码：

function selectelement(){
  $("img.imgClass").click(function() {
    if($(this).css("z-index")=="0"){
      $(this).css("z-index",100); 
    }else{
      $(this).css("z-index",0); 
    } 
    return this;
  });
}

图像的HTML代码：

<div class="imgContainer">
<span ng-repeat="addOn in viewModel.actSlideShow.children[viewModel.currentSlide].children >
<img class="imgClass ng-scope" ng-click="selectelement()" ng-src="pictures/vivek/bg1.jpg" alt="pictures/vivek/bg1.jpg" src="pictures/vivek/bg1.jpg"></span></div>

您需要将“Position:relative”添加到您希望应用不同z索引的元素的CSS中

您可以在以下代码中执行此操作：

$(this).css("position", "relative");

或者直接在CSS中：

img {
  position: relative;
  max-width: 455px;
  max-height: 303px;
  transform-origin: 50% 50% 0px;
  border-style: hidden;
  border-width: thin;
  z-index: 0;
}

否则，z指数将不会产生任何影响

您需要将“Position:relative”添加到您希望应用不同z索引的元素的CSS中

您可以在以下代码中执行此操作：

$(this).css("position", "relative");

或者直接在CSS中：

img {
  position: relative;
  max-width: 455px;
  max-height: 303px;
  transform-origin: 50% 50% 0px;
  border-style: hidden;
  border-width: thin;
  z-index: 0;
}

---

否则，z指数将不会产生任何影响

创建了一个工作版本来说明

$（“img.imgClass”）。单击（函数（）{
$（'img.imgClass'）。每个（函数（）{
console.log（$（this.attr（'id'））
a=parseInt（$（this.css（“z-index”））；
$（this.css（“z-index”，a+1）
});
a=$（this.css（“z-index”）-1；
$（this.css（“z-index”，a）；
归还这个；
});
img{
最大宽度：455px；
最大高度：303像素；
变换原点：50%50%0px；
边框样式：隐藏；
边界宽度：薄；
z指数：0；
位置：绝对位置；
}
创建了一个工作版本来说明



$（“img.imgClass”）。单击（函数（）{
$（'img.imgClass'）。每个（函数（）{
console.log（$（this.attr（'id'））
a=parseInt（$（this.css（“z-index”））；
$（this.css（“z-index”，a+1）
});
a=$（this.css（“z-index”）-1；
$（this.css（“z-index”，a）；
归还这个；
});
img{
最大宽度：455px；
最大高度：303像素；
变换原点：50%50%0px；
边框样式：隐藏；
边界宽度：薄；
z指数：0；
位置：绝对位置；
}


$（“img.imgClass”）。单击（函数（）{
$（'img.imgClass'）。每个（函数（）{
console.log（$（this.attr（'id'））
a=parseInt（$（this.css（“z-index”））；
$（this.css（“z-index”，a+1）
});
a=$（this.css（“z-index”）-1；
$（this.css（“z-index”，a）；
归还这个；
});
img{
最大宽度：455px；
最大高度：303像素；
变换原点：50%50%0px；
边框样式：隐藏；
边界宽度：薄；
z指数：0；
位置：绝对位置；
}


$（“img.imgClass”）。单击（函数（）{
$（'img.imgClass'）。每个（函数（）{
console.log（$（this.attr（'id'））
a=parseInt（$（this.css（“z-index”））；
$（this.css（“z-index”，a+1）
});
a=$（this.css（“z-index”）-1；
$（this.css（“z-index”，a）；
归还这个；
});
img{
最大宽度：455px；
最大高度：303像素；
变换原点：50%50%0px；
边框样式：隐藏；
边界宽度：薄；
z指数：0；
位置：绝对位置；
}

您正在使用ng click绑定eventHandler，但该eventHandler只添加了另一个eventHandler…您缺少一个“在范围结束括号之前是的，我会更正它，但是您知道如何使最顶端的图像切换吗？您正在使用ng click绑定eventHandler，但该eventHandler只添加了另一个eventHandler…您缺少一个“在跨度闭合括号之前是的，我会更正它，但是你知道如何使最顶部的图像切换吗？谢谢@Happysmithers，我添加了position属性，但即使在添加之后，最上面的图像没有隐藏在其他图像后面。其他图像的z索引工作正常。请发布一个可以直接复制的版本。请在此处找到工作代码笔最上面的图像隐藏在其他图像后面单击，但是其他图像正在正确切换。您能在这里帮助我吗。请参见此示例：单击最上面的图像将继续隐藏它，其他图像将弹出。。。每次点击我都会将z指数倒数一次，从1000开始。。。因此，解决方案需要在每次单击时重新排列所有图像。谢谢@Happysmithers，我已经添加了position属性，但即使添加了它，最上面的图像也不会隐藏在其他图像后面。其他图像的z索引工作正常。请发布一个可以直接复制的版本。请在此处找到工作代码笔单击后，最上面的图像会隐藏在其他图像后面，但是其他图像正在正确切换。您能在这里帮助我吗。请参见此示例：单击最上面的图像将继续隐藏它，其他图像将弹出。。。每次点击我都会将z指数倒数一次，从1000开始。。。因此，解决方案需要在每次单击时重新排列所有图像。