Question

我制作了一个Svg，现在我变成了一个HTML。我使用Jquery来显示和隐藏div。我有大约200个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一次隐藏“class”而不是“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。也就是说，如果你的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。 Div甚至可以在多个组中。

＆＃13;

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

＆＃13;

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

＆＃13;

显示和隐藏div：SVG进入一个包含多个图层的html

3 个答案: