Schleife mit jquery

[Franzus]

Hallo Leute,

habe folgendes Problem:

Habe mit ColdFusion eine Auflistung von Nachrichten in meinem html-Dokument. Von der Nachricht erscheint nur der Titel. Sobald man auf den Titel klickt soll der Teaser mit dem Link zum Volltext kommen. Mit der jquery-Funktion .show() und .hide() hab ich es schon geschafft das sich über den Titel der Teaser öffnen und schließen lässt. Nur macht er das dann mit allen Nachrichten gleichzeitig. Mit einer for-Schleife habe ich versucht das einzeln hinzu bekommen. Es funktioniert nur nicht. Was mach ich falsch?

  
  
$(document).ready(function(){  
  
for ( int i = 1 ; i<= 100 ; i++ )(function () {  
  
    $("p#titel" +i).click(function () {  
    $("div#teaser" +i).show("fast");  
    });  
  
    $("font#close" +i).click(function () {  
    $("div#teaser" +i).hide("fast");  
    });  
	  
})(i);  
  
});	  
  

Ein anderer Versuch war es die Funktionen den IDs, die jede einzelne Nachricht besitzt, da sie in einer SQL-DB gespeichert sind, zuzuordnen.

Aber alle Versuche scheiterten bis hier her. Bin um jeden Rat dankbar.

Gruß,

Franzus

[Gunnar Bittersmann]

@@Franzus:

nuqneH

Was mach ich falsch?

Du verwendest den ID-Bezeichner "teaser" mehrfach. ID-Bezeichner müssen dokumentweit eindeutig sein.

Qapla'

[Jeena Paradies]

Hallo,

Du verwendest den ID-Bezeichner "teaser" mehrfach. ID-Bezeichner müssen dokumentweit eindeutig sein.

Hm, wo macht er das denn? Die Schleife produziert doch immer #teaser1 #teaser2 usw.

Jeena

[suit]

Aber alle Versuche scheiterten bis hier her. Bin um jeden Rat dankbar.

Nebst dem Einwand von Gunnar:

Du hast das Konzept von Sektoren Element-Kollektions noch nicht verstanden und suchst vermutlich einfach nur die each-Methode (für schleifen) - in deinem Fall ist aber eher each ebenfalls nicht nötig, das geht wesentlich einfacher

In der Annahme, dass du dein HTML in eine vernünftige Struktur bringst, könnte das so aussehen:

$(.teaser h2).bind(  
  'click',  
  function() {  
    // alle andere Teaser verstecken  
    $(.teaser .abstract).hide('fast');  
  
    // den zugehörigen Text der derzigen einblenden  
    $(this).next('.abstract').show('fast)';  
  }  
);  
  
$(.teaser .abstract).bind(  
  'click',  
  function() {  
    $(this).hide('fast)';  
  }  
);

<ul id="teaser">  
  <li>  
     <h2>titel</h2>  
     <div class="abstract>  
       <p>lorem ipsum</p>  
     </div>  
  </li>  
  <li />  
</ul>

Beachtet ist hierbei nicht das ggf. nötige hinzufügen oder entfernen von Klassen um aufgeklappte Überschriften anders darzustellen oder um die Animationen entsprechend zu stoppen, wenn jemand eine überschrift mehrfach anklickt (damit kein Ping-Pong-Effekt entsteht).

[Felix Riesterer]

Lieber suit,

<ul id="teaser">

<li>
     <h2>titel</h2>
     <div class="abstract>
       <p>lorem ipsum</p>
     </div>
  </li>
  <li />
</ul>

  
wozu braucht es das <div>? Der "abstract" wird doch eh nur ein einziger Textabsatz sein, oder? Da fände ich folgende kürzere Version sinnvoller:  
  
~~~html
<ul id="teaser">  
    <li>  
        <h2>titel</h2>  
        <p class="abstract">lorem ipsum</p>  
    </li>  
    <li />  
</ul>

Liebe Grüße,

Felix Riesterer.

[suit]

wozu braucht es das <div>? Der "abstract" wird doch eh nur ein einziger Textabsatz sein, oder? Da fände ich folgende kürzere Version sinnvoller:

Ich gehe davon aus, dass "irgendwas längeres" daherkommt, vielleicht ein bis 3 kurze absätze, möglicherweise auch Bild.

Wenn es danach ginge, dass nur ein Textabsatz kommt, kann man sich die Klasse abstract auch gleich ganz sparen.

[molily]

$(document).ready(function(){

for ( int i = 1 ; i<= 100 ; i++ )(function () {

Variablen in JavaScript sind ungetypt. Was soll das »int« hier? Das sollte wohl »var« heißen.

Darüber hinaus wäre es hilfreich, wenn du ein vollständigeres Beispiel zur Verfügung stellen könntest, welches den Fehler demonstriert.

Mathias

[LX]

Hallo, Franzus!

Der Rat, statt der ids Klassen zu verwenden, scheint mir recht vernünftig. Wenn Du dennoch darauf verzichten willst (bspw. weil Du am Markup nichts ändern darfst), kannst Du Dir die Attribut-Selektoren von jQuery zunutze machen:

$(function() {
    $("p[id^=titel]").click(function () {
       $("div#teaser" +parseInt(this.id)).show("fast");
    });
    $("font[id^=close]").click(function () {
       $("div#teaser" +parseInt(this.id)).hide("fast");
    });
});

Ist doch gleich viel einfacher und funktioniert auch, da this.id immer die richtige Nummer mitliefert.

Gruß, LX