Z-インデックスを使用してループするためにJqueryを使用する

Question

これは間違った質問かもしれませんが、私はdivをz-インデックスを使用して重複させようとしています。しかし、私は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のためのスライドがありませんが、私は戻って1ページにページジャンプを作ってあげることのdivのリセットボタンを配置するためです。どんな助けもありがとう！

Answer 1

zオーダーに頼らないでください。ただ、このように、DOMの順序を使用します。

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

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

<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>

Answer 2

Demo #1

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

 

 
if (m1 > m2 || m1 > m3 || m1 > m4) { 
 
\t $("#map1").css("display", "block"); 
 
\t $("#map2 , #map3 , #map4").css("display", "none"); 
 
} else if (m2 > m1 || m2 > m3 || m2 > m4) { 
 
\t $("#map2").css("display", "block"); 
 
\t $("#map1 , #map3 , #map4").css("display", "none"); 
 
} else if (m3 > m1 || m3 > m2 || m3 > m4) { 
 
\t $("#map3").css("display", "block"); 
 
\t $("#map1 , #map2 , #map4").css("display", "none"); 
 
} else if (m4 > m1 || m4 > m2 || m4 > m3) { 
 
\t $("#map4").css("display", "block"); 
 
\t $("#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"); } 
 
    }); 
 

 
});

#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; }

<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>

Demo #2

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

 
if (m1 > m2 || m1 > m3 || m1 > m4) { 
 
\t $("#map1").css("display", "block"); 
 
\t $("#map2 , #map3 , #map4").css("display", "none"); 
 
} else if (m2 > m1 || m2 > m3 || m2 > m4) { 
 
\t $("#map2").css("display", "block"); 
 
\t $("#map1 , #map3 , #map4").css("display", "none"); 
 
} else if (m3 > m1 || m3 > m2 || m3 > m4) { 
 
\t $("#map3").css("display", "block"); 
 
\t $("#map1 , #map2 , #map4").css("display", "none"); 
 
} else if (m4 > m1 || m4 > m2 || m4 > m3) { 
 
\t $("#map4").css("display", "block"); 
 
\t $("#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"); 
 
    }); 
 
});

#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; }

<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>