顯示和隱藏div：將SVG轉換成具有多個圖層的html

Question

我做了一個Svg，現在我正在變成HTML。 我正在使用Jquery顯示和隱藏div。 我大約有200個div。 我使用按鈕，因此，當我單擊一個div時，我必須顯示特定的div，但是我需要隱藏所有其他div。 我認為不是上帝在這里一一列舉。 我可以顯示特定的div並隱藏所有其他div嗎？

我正在使用這個：

$(document).ready(function(){
   $("#div1,#div3,#div2").click(function(){
   $('#div4,#div5,#div6,#div7').show(1000);
   // I need to hide all other divs, the 193 left...
   $('').hide(1000);
   });
});

Answer 1

給您需要一次隱藏所有div的div一個“類”而不是一個“ id”。

https://css-tricks.com/the-difference-between-id-and-class/

$(document).ready(function(){
   $("#div1,#div3,#div2").click(function(){
   $('#div4,#div5,#div6,#div7').show(1000);
   // I need to hide all other divs, the 193 left...
   $('.generalClassName').hide(1000);
   });
});

Answer 2

Hayden C發布的替代方法是使用查詢選擇器和.not()來確定要顯示還是隱藏哪些div。 也就是說，如果您的div id都包含div （或類似的東西）：

 $(document).ready(function() { var toggleDivs = $('div[id*="div"]'); $("#div1,#div2").click(function() { var targetDivs = $('#div3,#div4'); var clickedDivs = $('#div1,#div2'); targetDivs.show(1000); toggleDivs.not(targetDivs).not(clickedDivs).hide(1000); }); }); 

 div { width: 100%; padding: 10px; border: dashed 1px steelblue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div1">1 - click me</div> <div id="div2">2 - or me</div> <div id="div3" style="display: none;">3</div> <div id="div4" style="display: none;">4</div> <div id="div5">5</div> <div id="div6">6</div> <div id="div7">7</div> <div id="div8">8</div> 

您還可以使用類和.not()完成相同的操作（如Hayden建議的那樣）：

 $(document).ready(function () { var toggleDivs = $('.toggle'); $("#div1,#div2").click(function () { var targetDivs = $('#div3,#div4'); var clickedDivs = $('#div1,#div2'); targetDivs.show(1000); toggleDivs.not(targetDivs).not(clickedDivs).hide(1000); }); }); 

 div { width: 100%; padding: 10px; border: dashed 1px steelblue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div1" class="toggle">1 - click me</div> <div id="div2" class="toggle">2 - or me</div> <div id="div3" class="toggle" style="display: none;">3</div> <div id="div4" class="toggle" style="display: none;">4</div> <div id="div5" class="toggle">5</div> <div id="div6" class="toggle">6</div> <div id="div7" class="toggle">7</div> <div id="div8" class="toggle">8</div> 

Answer 3

您不使用id並將其全部命名為jQuery是正確的。 假設您的div分為顯示和隱藏在一起的一致組，最好的方法是使用類。

給每個需要一起顯示的div分配相同的class 。 Divs甚至可以屬於多個組。

 function showGroup(group) { $("#hideables").children('div.'+group).show(); $("#hideables").children('div').not('.'+group).hide(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="showGroup('dog')">Show dogs</button> <button onclick="showGroup('cat')">Show cats</button> <button onclick="showGroup('goat')">Show goats</button> <div id="hideables"> <div class="dog">dog</div> <div class="dog cat">dog cat</div> <div class="cat">cat</div> <div class="goat">goat</div> <div class="goat dog">goat dog</div> </div>