Mehrere Divs mit Jquery ein-/ausblenden

Ich möchte einige Schaltflächen verwenden, um mehrere Divs mit jquery anzuzeigen / auszublenden.

Die Seite zeigt zunächst alle Divs. Die Idee ist dann, dass es eine Schaltfläche zum Zurücksetzen (alles anzeigen) und dann separate Schaltflächen zum Anzeigen eines bestimmten Divs geben wird, während der Rest ausgeblendet wird.

Jede Hilfe wäre sehr willkommen.

<div class="buttons">
<a class="button" id="showall">All</a>
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>

<div id="div1">Lorum Ipsum</div>
<div id="div2">Lorum Ipsum</div>
<div id="div3">Lorum Ipsum</div>
<div id="div4">Lorum Ipsum</div>

jQuery(function() {
  jQuery('#showall').click(function() {
    jQuery('.targetDiv').show();
  });
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').hide();
    jQuery('#div' + $(this).attr('target')).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="buttons">
  <a id="showall">All</a>
  <a class="showSingle" target="1">Div 1</a>
  <a class="showSingle" target="2">Div 2</a>
  <a class="showSingle" target="3">Div 3</a>
  <a class="showSingle" target="4">Div 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum1</div>
<div id="div2" class="targetDiv">Lorum Ipsum2</div>
<div id="div3" class="targetDiv">Lorum Ipsum3</div>
<div id="div4" class="targetDiv">Lorum Ipsum4</div>

http://jsfiddle.net/XwN2L/

Wenn sie in logische Gruppen fallen, Ich würde wahrscheinlich den hier bereits aufgeführten Klassenansatz verwenden.

Viele Leute scheinen zu vergessen, dass man es tatsächlich kann Wählen Sie mehrere Elemente nach ID im selben jQuery-Selektor aussowie:

$("#div1, #div2, #div3").show();

Wobei „div1“, „div2“ und „div3“ alle ID-Attribute für verschiedene Divs sind, die Sie gleichzeitig anzeigen möchten.

Ordnen Sie jedem div a zu class. Dann können Sie Aktionen für alle ausführen:

$(".divClass").hide();

Jede Taste kann also Folgendes tun:

$(".divClass").hide()
$("#specificDiv").show();

Sie können dies allgemeiner gestalten und die offensichtliche Konvention verwenden – die Schaltfläche und das div mit derselben Nummer in der ID sind verwandt. So:

$(".button").click(function() {
  var divId = "#div" + $(this).attr("id").replace("showdiv", "");
  $(".divClass").hide(); 
  $(divId).show();
}

einfacher aber dummer Ansatz:

$('#showall').click(function(){
    $('div[id^=div]').show();
});

$('#showdiv1').click(function(){
    $('#div1').show();
    $('div[id^=div]').not('#div1').show();
});

Was das Bessere betrifft – fügen Sie allen Divs eine gemeinsame Klasse hinzu und verwenden Sie einige Attribute in Schaltflächen mit der ID der Ziel-Divs

Wenn Sie in der Lage sein möchten, einzelne Divs und/oder Gruppen von Divs mit weniger Code anzuzeigen / auszublenden, wenden Sie einfach mehrere Klassen darauf an, um sie bei Bedarf in Gruppen einzufügen.

Beispiel :

.group1 {}
.group2 {}
.group3 {}

<div class="group3"></div>
<div class="group1 group2"></div>
<div class="group1 group3 group2"></div>

Dann müssen Sie nur noch eine Kennung verwenden, um die Aktion mit dem Ziel zu verknüpfen, und mit 5,6 Zeilen JQuery-Code haben Sie alles, was Sie brauchen.

Überprüfen Sie dies Beispiel

HTML:

<div class="buttons">
<a class="button" id="showall">All</a>
<a class="button" id="showdiv1">Div 1</a>
<a class="button" id="showdiv2">Div 2</a>
<a class="button" id="showdiv3">Div 3</a>
<a class="button" id="showdiv4">Div 4</a>
</div>

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>

Javascript:

$('#showall').click(function(){
    $('div').show();
});

$('#showdiv1').click(function(){
    $('div[id^=div]').hide();
    $('#div1').show();
});
$('#showdiv2').click(function(){
    $('div[id^=div]').hide();
    $('#div2').show();
});

$('#showdiv3').click(function(){
    $('div[id^=div]').hide();
    $('#div3').show();
});

$('#showdiv4').click(function(){
    $('div[id^=div]').hide();
    $('#div4').show();

});

Ich hatte das gleiche Problem, las diesen Beitrag, beendete aber das Erstellen dieser Lösung, die die Divs dynamisch auswählt, indem die ID aus einer benutzerdefinierten Klasse auf der abgerufen wird href mit JQuery attr() Funktion.

Hier ist die JQuery:

$('a.custom_class').click(function(e) {
  var div = $(this).attr('href');
  $(div).toggle('fast');
  e.preventDefault();
}

Und Sie müssen nur einen Link wie diesen dann im HTML erstellen:

<a href="#" class="#1">Link Text</a>
<div id="1">Div Content</div>