Ist es möglich, verschiedene Divs durch Klicken auf verschiedene Elemente mit der gleichen Funktion umzuschalten?

Question

Say I 50 div haben, wie folgt aus:

<div class="btn1"></div> //Toggles the first container to appear 
    <div class="btn2"></div> //Toggles the second container to appear 
    <div class="btn3"></div> //Toggles the third container to appear 

und weitere 50 div, die Informationen enthalten, wie folgt aus:

<div class="container-1"><h1>This is the first container</h1></div> 
    <div class="container-2"><h1>This is the second container</h1></div> 
    <div class="container-3"><h1>This is the third container</h1></div> 

Ist es möglich, die entsprechenden div Toggle zu machen, wenn jede Taste angeklickt wird mit nur einer Funktion? Ich habe ein wenig über Delegierung gelesen und arbeite an Eltern/Geschwistern, aber es scheint nur an mehreren Knöpfen zu funktionieren, die den gleichen Behälter öffnen, anstatt jeden Knopf zu öffnen, der jeden Behälter öffnet.

Irgendwie glaube ich nicht, eine Funktion für jedes Div zu schreiben, ist der Weg zu gehen.

Answer 1

ja, es ist möglich, zu zeigen, zu verwenden. Grundsätzlich müssen Sie einen Verweis auf geklickt Objekt hinzufügen, so klicken Ereignis wird wissen, was Ein-/Ausblenden

$(function() { 
 
    $('.btn').on('click', function(e) { 
 
    var $dataTarget = $($(this).data('target')); 
 
    $dataTarget.show().siblings('.container').hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="btn btn1" data-target=".container-1"></div> //Toggles the first container to appear 
 
<div class="btn btn2" data-target=".container-2"></div> //Toggles the second container to appear 
 
<div class="btn btn3" data-target=".container-3"></div> //Toggles the third container to appear 
 

 

 
<div class="container container-1"> 
 
    <h1>This is the first container</h1> 
 
</div> 
 
<div class="container container-2"> 
 
    <h1>This is the second container</h1> 
 
</div> 
 
<div class="container container-3"> 
 
    <h1>This is the third container</h1> 
 
</div>

Es wird der Behälter ausgerichtet, werden dann andere Behälter verstecken.

Answer 2

1. Nutzung beginnt mit Wahl ^Document here
2. Verwenden data-* auf dem entsprechende Schaltfläche div zu speichern.
3. Wählen Sie die data-* dann als Auswahl

   $('div[class^=container]').hide(); 
    
   $('div[class^=btn]').click(function() { 
    
       $('div[class^=container]').hide(); 
    
       var thisclass = $(this).attr("data-class") 
    
       $('.' + thisclass).show(); 
    
   })

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    
   <div class="btn1" data-class="container-1">1</div> 
    
   <div class="btn2" data-class="container-2">2</div> 
    
   <div class="btn3" data-class="container-3">3</div> 
    
   
    
   <div class="container-1"> 
    
       <h1>This is the first container</h1> 
    
   </div> 
    
   <div class="container-2"> 
    
       <h1>This is the second container</h1> 
    
   </div> 
    
   <div class="container-3"> 
    
       <h1>This is the third container</h1> 
    
   </div>

Answer 3

können Sie verwenden index und eq, dies zu tun

$("[class*='btn']").click(function(){ 
 
\t $("[class*='container-']").eq($(this).index()-1).toggle(); 
 
})

[class*="btn"]{ 
 
\t width:150px; 
 
\t height:20px; 
 
\t border:2px solid #000; 
 
\t display:inline-block; 
 
\t cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="btn1"></div> 
 
<div class="btn2"></div> 
 
<div class="btn3"></div> 
 

 
<div class="container-1"> 
 
    <h1>This is the first container</h1> 
 
</div> 
 
<div class="container-2"> 
 
    <h1>This is the second container</h1> 
 
</div> 
 

 
<div class="container-3"> 
 
    <h1>This is the third container</h1> 
 
</div>

Answer 4

Sie so etwas wie dieses

$(document).ready(function() { 
    $("div[class^='btn']").each(function() { 
    $(this).click(function() { 
     var str = $(this)[0].className; 
     $(".container-" + str.substring(3, str.length)).toggle(); 
    }); 
    }); 
}); 

Sie erhalten alle Klasse, die beginnt mit btn und wenden ein verwenden können click event to it .. und basierend auf der Nummer ausblenden die entsprechende Containerklasse. Hier

ist der vollständige Code:

$(document).ready(function() { 
 
    $("div[class^='btn']").each(function() { 
 
    $(this).click(function() { 
 
     var str = $(this)[0].className; 
 
     $(".container-" + str.substring(3, str.length)).toggle(); 
 
    }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="btn1">aaaa</div> //Toggles the first container to appear 
 
<div class="btn2">bbbb</div> //Toggles the second container to appear 
 
<div class="btn3">cccc</div> //Toggles the third container to appear 
 
<div class="container-1"> 
 
    <h1>This is the first container</h1> 
 
</div> 
 
<div class="container-2"> 
 
    <h1>This is the second container</h1> 
 
</div> 
 
<div class="container-3"> 
 
    <h1>This is the third container</h1> 
 
</div>

(Quelle: Geige https://jsfiddle.net/fxabnk4o/17/)