jQuery-divs einer Schleife ein und ausblenden

[Spelmann]

Hi,
mein Problem:

Ich habe eine News Liste mit Teasern. beim Klick auf das DIV der Klasse artikelShow soll der ganze Artikel gezeigt werden.

Wie erfährt das jQuery JS, welcher der divs angeklickt wurde bzw, welche DIVs zu togglen sind?
Ich hab nix gefunden mit dem ich zurecht kam. Bisher habe ich soetwas mit IDs gelöst, aber diesmal weiß ich nicht wieviele Artikel gelistet werden.

Kann mir jemand helfen?

$(document).ready(function()
   {
       $('.newsAll').hide();
                            
                            
       $('.artikelShow').click(function()
           {
	        $('.newsTeaser').hide();
                $('.newsAll').slideDown('slow');
            });
    });

<div id="wrapNews">

   <div class="newsTeaser">
       Der Inhalt des Teasers
       <div class="artikelShow">mehr lesen</div>
   </div>

   <div class="newsAll">
       Der komplette Artikel
   </div>
</div>

Vielen Dank!

 

[CPoly]

Es lässt sich im Prinzip die gleiche Lösung wie hier http://www.tutorials.de/javascript-...-dem-gerade-geklickten-element-verwenden.html und auch hier http://www.tutorials.de/javascript-ajax/376291-jquery-content-fade-mehrerer-divs.html anwenden.

Du hast innerhalb des click-Handler Zugriff auf das geklickte Element via "this".

var artikelShow = $('.artikelShow');
var newsAll = $('.newsAll').hide();
 
artikelShow.click(function() {
    var index = artikelShow.index(this);

    $(this).parent().hide();

    newsAll.eq(index).slideDown('slow');
});

 

[Spelmann]

Vielen Dank CPoly,
zwei Fragen noch.

1.
Wieso funktioniert

$(this).parent().hide();

?

Was ist in diesem Fall hier das Elternelement? newsAll und newsTeaser sind doch Geschwister. (Hab noch nicht viel JS Erfahrung)

2.
Interpretiere ich diese Zeile richtig:

newsAll.eq(index)

newsAll nur da, wo es das Equivalent von index gibt. Habe ich das richtig verstanden?
Dann ist folgendes ja auch nicht falsch oder?

artikelShow.click(function() {
								var index = artikelShow.index(this);
								
								newsTeaser.eq(index).hide();
								newsAll.eq(index).slideDown('fast');
								});

Jetzt sinds doch 3 Fragen geworden.

 

[CPoly]

1. "this" ist ja eines der "artikelShow" Elemente. Und entsprechend ist das Elternelement ein "newsTeaser".

2. In Text Form würde die Anweisung lautet: <<Gib mir von allen DOM Elementen in der Liste das an Stelle "index".>>
Und in der Liste hast du ja alle "newsAll" drin und zwar in der Reihenfolge wie sie im Dokument vorkommen.

3. Im Prinzip ist das genauso möglich. Aber dann brauchst du noch ein drittes Objekt für alle "newsTeaser". Ich bin eben den weg gegangen, dass ich die Klasse ganz ignoriere, da mich beim Klick ja auch nur "artikelShow" interessiert.