• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

jquery: Mehrere Elemente unabhängig voneinander ansprechen

B

blabla333

Mitglied
Ich habe mehrere Elemente, die wie folgt aufgebaut sind:

HTML: 
<section class="toggle">

<header class="toggle-header">
<h2>Überschrift</h2>
</header>

<div class="toggle-content">Hier steht der Text</div>

</section>

Erst einmal: Ist der Aufbau so sinnvoll bzw. geht das einfacher?

Mein Javascript sieht so aus:

Code: 
$('.toggle-header').click(function() {
  $('.toggle .toggle-content').slideToggle('slow', function() {
    // Animation complete.
  });
});

Jetzt werden natürlich sämtliche Elemente gleichzeitig geöffnet bzw. geschlossen. Ich möchte aber, dass immer nur das jeweilige Element unabhängig von den anderen angesprochen wird. Geht dies auch ohne id? Ich müsste jetzt zu weit ausholen, um zu erklären, warum ich auf einzelne Id's verzichten möchte/muss...
 
So funktioniert es:

Code: 
$('.toggle-header').each(function(){
    var $content = $(this).closest('section').find('.toggle-content');
    $(this).click(function(e){
        e.preventDefault();
        $content.not(':animated').slideToggle();
        });
    });

Bin natürlich für jeden Verbesserungsvorschlag offen...

Aber könnte ich nicht irgendwie einfach das section-Element klickbar machen und daraufhin toggle-content einblenden. Irgendwie muss das doch gehen, dass man das untergeordnete Element anspricht, oder?
 
Zuletzt bearbeitet:
Traversieren ist doch hier unnötig. Warum schreibst du nicht etwas wie $('section.toggle') oder gibst <section> eine eigene ID?
 
section.toggle betrifft doch dann wieder alle "Blöcke" und wie schon im ersten Post erwähnt, würde ich gerne auf IDs verzichten...

Mein Gedanke wäre, dass ich "section" klickbar mache und dabei slidetoggle auf den zugehörigen "toggle-content" angewandt wird. Da sich toggle-content innerhalb von section befindet, bräuchte ich keine ID. Allein die Umsetzung will mir nicht gelingen. :-(
 
blabla333 schrieb:
Mein Gedanke wäre, dass ich "section" klickbar mache und dabei slidetoggle auf den zugehörigen "toggle-content" angewandt wird. Da sich toggle-content innerhalb von section befindet, bräuchte ich keine ID. Allein die Umsetzung will mir nicht gelingen. :-(
Zum Vergrößern anklicken....

Bin mir jetzt nicht sicher, was du genau willst, aber dann nimm doch das <section> Tag als Selektor.

HTML: 
$('section').click(function(){
  var content = $(this).find('.toggle-content')
  $(content).slideToggle();
});
 
Prinzipiell meinen wir das gleiche, nur funktioniert das Skript nicht. Ich habe z.B. unten stehenden Code. Dabei soll slidetoggle bei Klick auf ein section ausgeführt werden. Also
Code: 
$('section').click(function(){ }

Geöffnet werden soll das in das section Element verschachtelte div-Element (class=toggle-content).

Code: 
var content = $(this).find('.toggle-content')

Hiermit werden wiederum alle anderen angesprochen :-(

HTML: 
<section class="toggle">
<header class="toggle-header"><h2>Überschrift 1</h2></header>
<div class="toggle-content">Hier steht der Text 1</div>
</section>

<section class="toggle">
<header class="toggle-header"><h2>Überschrift 2</h2></header>
<div class="toggle-content">Hier steht der Text2 </div>
</section>

<section class="toggle">
<header class="toggle-header"><h2>Überschrift 3</h2></header>
<div class="toggle-content">Hier steht der Text 3</div>
</section>
 
Vielleicht kann es ja auch mal jemand gebrauchen:

Code: 
$('section').click(function(){
      var content = $(this).children('.toggle-content')
      $(content).slideToggle();
    });

So funktioniert es.
 
Ob children() oder find() ist hier unerheblich. Entscheidend ist, dass mit $(this) nur das aktuelle Objekt angesprochen wird. Folgender Code funktioniert. Ich habe es extra noch mal nachvollzogen:

HTML: 
[<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Foobar</title>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<style>
section {
	width: 200px;
	padding-top: 10px;
	margin-bottom: 10px;
	border: 1px solid;
	font-size: 12px;
}
</style>
<body>
<section class="toggle">
	<header class="toggle-header"><h2>Überschrift 1</h2></header>
	<div class="toggle-content">Hier steht der Text 1</div>
</section>

<section class="toggle">
	<header class="toggle-header"><h2>Überschrift 2</h2></header>
	<div class="toggle-content">Hier steht der Text2 </div>
</section>

<section class="toggle">
	<header class="toggle-header"><h2>Überschrift 3</h2></header>
	<div class="toggle-content">Hier steht der Text 3</div>
</section>

<script>
$('section').click(function(){
	var content = $(this).find('.toggle-content')
	$(content).slideToggle();
});
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben