Question

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

首次加载页面时，如果单击最顶层的图像，则应隐藏在第二张图像后面。但这并没有发生，因为所有图像的z-index最初都设置为0。

期望：当我点击它时，最顶层的图像应隐藏，切换应该适用于所有图像。

jQuery代码用于切换图像的z-index值：

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>

图片CSS：

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

Answer 1

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

https://jsfiddle.net/kvs32wtd/1/

＆＃13;

$("img.imgClass").click(function() {

  $('img.imgClass').each(function() {
    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);
  return this;
});

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgContainer">
  <img class="imgClass" id="one" src="https://photogallerylinks.com/pics/1651.jpg">
  <img class="imgClass" id="two" src="https://www.timeshighereducation.com/sites/default/files/small_building.jpg">
  <img id="three" class="imgClass" src="https://photogallerylinks.com/pics/1648.jpg">
</div>

＆＃13;

Answer 2

您需要将“Position：relative”添加到要应用不同z-index的元素的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-index不会产生任何影响。

Answer 3

$("img.imgClass").click(function() {

  $('img.imgClass').each(function() {
    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);
  return this;
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgContainer">
  <img class="imgClass" id="one" src="https://photogallerylinks.com/pics/1651.jpg">
  <img class="imgClass" id="two" src="https://www.timeshighereducation.com/sites/default/files/small_building.jpg">
  <img id="three" class="imgClass" src="https://photogallerylinks.com/pics/1648.jpg">
</div>

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

3 个答案: