使用Jquery使用z-index循环

Question

好吧，所以这可能是一个愚蠢的问题，但我一直试图让我的div使用z-index相互重叠。但是我似乎无法通过改变z-index本身来管理我实际上如何循环它。代码如下：

$(document).ready(function() {
  $("#map1").click(function(){
    $("#map1").slideUp("slow");
  });
  $("#map2").click(function(){
    $("#map2").slideUp("slow");
  });
  $("#map3").click(function(){
    $("#map3").slideUp("slow");
  });
});

#map1, #map2, #map3, #map4
{
  width: 99%;
  height: 98%;
  position: absolute;
  cursor: pointer;
}

#map1 { z-index: 999; }
#map2 { z-index: 998; }
#map3 { z-index: 997; }
#map4 { z-index: 996; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maps">
  <div id="map1">Map 1</div>
  <div id="map2">Map 2</div>
  <div id="map3">Map 3</div>
  <div id="map4">
    <button id="reset">Reset</button>
  </div>
</div>

map4没有幻灯片，但那是因为我想在该div上放置一个重置按钮，使页面跳转到第1页。任何帮助都将不胜感激！

Answer 1

  

Demo #1

＆＃13;

＆＃13;

var m1 = $("#map1").css("z-index"),
	m2 = $("#map2").css("z-index"),
	m3 = $("#map3").css("z-index"),
	m4 = $("#map4").css("z-index");


if (m1 > m2 || m1 > m3 || m1 > m4) {
	$("#map1").css("display", "block");
	$("#map2 , #map3 , #map4").css("display", "none");
} else if (m2 > m1 || m2 > m3 || m2 > m4) {
	$("#map2").css("display", "block");
	$("#map1 , #map3 , #map4").css("display", "none");
} else if (m3 > m1 || m3 > m2 || m3 > m4) {
	$("#map3").css("display", "block");
	$("#map1 , #map2 , #map4").css("display", "none");
} else if (m4 > m1 || m4 > m2 || m4 > m3) {
	$("#map4").css("display", "block");
	$("#map1 , #map2 , #map3").css("display", "none");
}

$(document).ready(function() {

  $("#map1").click(function(){
    $("#map1").slideUp("slow", m1Callback );
    function m1Callback() { $("#map2").slideDown("slow"); }
  });

  $("#map2").click(function(){
    $("#map2").slideUp("slow", m2Callback );
    function m2Callback() { $("#map3").slideDown("slow"); }
  });

  $("#map3").click(function(){
    $("#map3").slideUp("slow", m3Callback );
    function m3Callback() { $("#map4").slideDown("slow"); }
  });

  $("#map4").click(function(){
    $("#map4").slideUp("slow", m4Callback );
    function m4Callback() { $("#map1").slideDown("slow"); }
  });

});

＆＃13;

#map1, #map2, #map3, #map4
{
  position: absolute;
  cursor: pointer;
  background-color: #ccc
}

#map1 { z-index: 999; }
#map2 { z-index: 998; }
#map3 { z-index: 997; }
#map4 { z-index: 996; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maps">
  <div id="map1">Map 1</div>
  <div id="map2">Map 2</div>
  <div id="map3">Map 3</div>
  <div id="map4">
    <button id="reset">Reset</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

  

Demo #2

＆＃13;

＆＃13;

var m1 = $("#map1").css("z-index"),
	m2 = $("#map2").css("z-index"),
	m3 = $("#map3").css("z-index"),
	m4 = $("#map4").css("z-index");

if (m1 > m2 || m1 > m3 || m1 > m4) {
	$("#map1").css("display", "block");
	$("#map2 , #map3 , #map4").css("display", "none");
} else if (m2 > m1 || m2 > m3 || m2 > m4) {
	$("#map2").css("display", "block");
	$("#map1 , #map3 , #map4").css("display", "none");
} else if (m3 > m1 || m3 > m2 || m3 > m4) {
	$("#map3").css("display", "block");
	$("#map1 , #map2 , #map4").css("display", "none");
} else if (m4 > m1 || m4 > m2 || m4 > m3) {
	$("#map4").css("display", "block");
	$("#map1 , #map2 , #map3").css("display", "none");
}

$(document).ready(function() {
  $("#map1").click(function(){
    $("#map1").slideUp("slow");
    $("#map2").slideDown("slow");
  });
  $("#map2").click(function(){
    $("#map2").slideUp("slow");
    $("#map3").slideDown("slow");
  });
  $("#map3").click(function(){
    $("#map3").slideUp("slow");
    $("#map4").slideDown("slow");
  });
  $("#map4").click(function(){
    $("#map4").slideUp("slow");
    $("#map1").slideDown("slow");
  });
});

＆＃13;

#map1, #map2, #map3, #map4
{
  position: absolute;
  cursor: pointer;
  background-color: #ccc
}

#map1 { z-index: 999; }
#map2 { z-index: 998; }
#map3 { z-index: 997; }
#map4 { z-index: 996; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maps">
  <div id="map1">Map 1</div>
  <div id="map2">Map 2</div>
  <div id="map3">Map 3</div>
  <div id="map4">
    <button id="reset">Reset</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

不要依赖z顺序。只需使用DOM中的顺序，如下所示：

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".map").click(function(){
    $(this).slideUp("slow");
  });
  $("#reset").click(function(){
    $(".map").slideDown("slow");
  });
});

＆＃13;

#map1, #map2, #map3, #map4
{
  width: 99%;
  height: 98%;
  position: absolute;
  cursor: pointer;
}
#map1
{
  background: red;
}
#map2
{
  background: green;
}
#map3
{
  background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="maps">
  <div id="map4">
    <button id="reset">Reset</button>
  </div>
  <div id="map3" class="map">Map 3</div>
  <div id="map2" class="map">Map 2</div>
  <div id="map1" class="map">Map 1</div>
</div>

＆＃13;

＆＃13;

＆＃13;