jQuery - Togglen von bestimmten Elementen

alfred899 · 14.11.2011, 18:49

Hallo zusammen,

ich habe ein kleines Problem mit jQuery bzw. finde keinen Lösungsweg für mein Problem.

Ich lasse Links, die in einer Datenbanktabelle gespeichert wurden, über PHP ausgeben. Diese haben zusätzlich in einer Tabelle ein Ordner-ID zugewiesen bekommen, sodass diese passend unter dem Ordner ausgegeben werden müssen.
Ich würde es jetzt gerne so machen, dass der User den Link des Ordners anklicken kann und dann die Links angezeigt bekommt. Die Links sollten vorher nicht zu sehen sein.

Bisher sieht mein Code so aus:

PHP-Code:

  echo "<div id='ordner'>";        

$result = mysql_query("SELECT o.ordner, o.user_id, l.link, FROM ordner o LEFT JOIN links l ON(o.ordnerid = l.ordner) WHERE o.user_id = '$user_id'");

        $e = 1;

        $i = 1;

        while($row = mysql_fetch_assoc($result)) { 

              echo "<a href='#'><li id='$e'>";

              echo $row['o.ordner'];

              echo "</li></a>";

              echo "<br />";

              $e++;

            

            echo "<div class='$i'>";

            echo "<a href='";

            echo $row['link'];

            echo "'>";

            echo "Link";

            echo "</a>";

            echo "</div>";

            $i++;

}

echo "</div>";

jQuery:

Code:

$(function() {
	var hide = $('#ordner div');
	$(hide).hide();
	
	$('#ordner li').bind('click', function() {
		$('#ordner div').each(function(i) {
		$('#ordner div').toggle('fast');
		});
		});
	});

Wie kann ich jetzt erreichen, dass jedes li-Element (Ordner) bei einem Klick den richtigen Ordner angezeigt bekommt?

Ich würde mich über jede Anregung und Hilfe sehr freuen.
Danke und Gruß Jan

ChrisB · 14.11.2011, 19:26

Erzeuge erst mal vernünftiges HTML.
DIV > A > LI ist keine gültiges Struktur. LI-Elemente dürfen ausschließlich als Kindelemente von Listen vorkommen.

Wenn du eine Verzeichnistruktur abbilden willst (?), machst du das am besten gleich als verschachtelte Liste. Dann brauchst du beim Klick auf einen Punkt auf einer ebene nur die in diesem liegende Liste auf sichtbar schalten.

tr0y · 15.11.2011, 04:57

Und denk mal der Übersicht halber darüber nach Template-Strings zu nutzen und 1 / kein echo innerhalb einer while schleife durch die gegend zu werfen, statt 50 echo's untereinander zu kleben, steigert ungemein die Lesbarkeit von dem was du da ausgibst innerhalb des sourcecodes.

PHP-Code:

  $blueprint = '<a href="{to}">{name}</a>';

$in = array(
   '{to}', 
   '{name}'
);

$out = array(
   'http://google.de', 
   'google.de'
);

$output = str_replace( $in, $out, $blueprint );

alfred899 · 15.11.2011, 17:13

Ja, es soll eine Verzeichnisstruktur (Ordnerstruktur) werden.
Wie bekomme ich es aber jetzt hin, dass die Namen des Ordners aus der einen Tabelle geholt werden und dazu passend darunter die Links angezeigt werden?
Ist das mit einer Abfrage möglich, sowie ich es oben auch schon gemacht hab möglich?

Wenn ich es bspw. so mache, wird natürlich der Name des Ordners/Verzeichnisses immer wiederholt bei einem neuen Link.

PHP-Code:

  $ul = '<ul id="{name}"><li>{name}';

$li = '<li id="{link}">{description}</li>';

$end = '</li></ul>';

Danke für den Tipp mit den Template-Strings. Werde ich ab jetzt nutzen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] UPDATE jQuery 1.9m6 Submenue rendert nicht wie gewünscht (overlay = fals	dreamcatcher	HTML, Usability und Barrierefreiheit	9	12.10.2011 23:55
jQuery UI Tabs komplett mit AJAX laden und letzt gewählten Tab wählen	K00S	JavaScript, Ajax und mehr	6	10.09.2011 13:54
[Erledigt] [JQuery] JQuery funktioniert nach .insertBefore() nicht mehr	Minimi	JavaScript, Ajax und mehr	5	06.09.2011 21:24
[Erledigt] Jquery mobile form action verhalten unterdrücken	drsoong	JavaScript, Ajax und mehr	1	21.07.2011 14:57
jQuery: Select Area in Input Feld umwandeln	Elementus	JavaScript, Ajax und mehr	1	12.07.2011 20:31
Einsatz von Milestones (jQuery)	dreamcatcher	JavaScript, Ajax und mehr	4	28.06.2011 12:07
PHP und jquery	mehlwurm	PHP Einsteiger	13	30.05.2011 23:09
jquery UI sortable von mehreren Elementen	Jojo_44	JavaScript, Ajax und mehr	0	31.03.2011 17:25
[Erledigt] jQuery click event bei nachgeladenen Elementen	JanM	JavaScript, Ajax und mehr	3	31.03.2011 16:54
Einfaches JQuery resize und scoll läuft nicht	smilla	JavaScript, Ajax und mehr	5	08.02.2011 20:44
jQuery, einem DOM-Knoten eine Payload anhängen	Chriz	JavaScript, Ajax und mehr	6	22.12.2010 15:31
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
Bestimmte elemente nur zu bestimmten Daten anzeigen lassen		PHP Tipps 2005-2	3	14.07.2005 14:05
bestimmten string aus spalte auslesen	aircrash	PHP Tipps 2005	3	01.02.2005 18:07

14.11.2011, 18:49
alfred899 Neuer Benutzer Registriert seit: 29.01.2011 Beiträge: 4 PHP-Kenntnisse: Fortgeschritten	jQuery - Togglen von bestimmten Elementen Hallo zusammen, ich habe ein kleines Problem mit jQuery bzw. finde keinen Lösungsweg für mein Problem. Ich lasse Links, die in einer Datenbanktabelle gespeichert wurden, über PHP ausgeben. Diese haben zusätzlich in einer Tabelle ein Ordner-ID zugewiesen bekommen, sodass diese passend unter dem Ordner ausgegeben werden müssen. Ich würde es jetzt gerne so machen, dass der User den Link des Ordners anklicken kann und dann die Links angezeigt bekommt. Die Links sollten vorher nicht zu sehen sein. Bisher sieht mein Code so aus: PHP-Code: echo "<div id='ordner'>"; $result = mysql_query("SELECT o.ordner, o.user_id, l.link, FROM ordner o LEFT JOIN links l ON(o.ordnerid = l.ordner) WHERE o.user_id = '$user_id'"); $e = 1; $i = 1; while($row = mysql_fetch_assoc($result)) { echo "<a href='#'><li id='$e'>"; echo $row['o.ordner']; echo "</li></a>"; echo "<br />"; $e++; echo "<div class='$i'>"; echo "<a href='"; echo $row['link']; echo "'>"; echo "Link"; echo "</a>"; echo "</div>"; $i++; } echo "</div>"; jQuery: Code: $(function() { var hide = $('#ordner div'); $(hide).hide(); $('#ordner li').bind('click', function() { $('#ordner div').each(function(i) { $('#ordner div').toggle('fast'); }); }); }); Wie kann ich jetzt erreichen, dass jedes li-Element (Ordner) bei einem Klick den richtigen Ordner angezeigt bekommt? Ich würde mich über jede Anregung und Hilfe sehr freuen. Danke und Gruß Jan


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

14.11.2011, 19:26
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	Erzeuge erst mal vernünftiges HTML. DIV > A > LI ist keine gültiges Struktur. LI-Elemente dürfen ausschließlich als Kindelemente von Listen vorkommen. Wenn du eine Verzeichnistruktur abbilden willst (?), machst du das am besten gleich als verschachtelte Liste. Dann brauchst du beim Klick auf einen Punkt auf einer ebene nur die in diesem liegende Liste auf sichtbar schalten. __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

15.11.2011, 04:57
tr0y Erfahrener Benutzer Registriert seit: 26.07.2010 Beiträge: 4.865 PHP-Kenntnisse: Fortgeschritten	Und denk mal der Übersicht halber darüber nach Template-Strings zu nutzen und 1 / kein echo innerhalb einer while schleife durch die gegend zu werfen, statt 50 echo's untereinander zu kleben, steigert ungemein die Lesbarkeit von dem was du da ausgibst innerhalb des sourcecodes. PHP-Code: `$blueprint = '<a href="{to}">{name}</a>'; $in = array( '{to}', '{name}' ); $out = array( 'http://google.de', 'google.de' ); $output = str_replace( $in, $out, $blueprint );` __________________ Lasse mir ohne Anwendung von Gewalt Dinge schenken, Amazon weiß darüber bald mehr.

15.11.2011, 17:13
alfred899 Neuer Benutzer Registriert seit: 29.01.2011 Beiträge: 4 PHP-Kenntnisse: Fortgeschritten	Ja, es soll eine Verzeichnisstruktur (Ordnerstruktur) werden. Wie bekomme ich es aber jetzt hin, dass die Namen des Ordners aus der einen Tabelle geholt werden und dazu passend darunter die Links angezeigt werden? Ist das mit einer Abfrage möglich, sowie ich es oben auch schon gemacht hab möglich? Wenn ich es bspw. so mache, wird natürlich der Name des Ordners/Verzeichnisses immer wiederholt bei einem neuen Link. PHP-Code: `$ul = '<ul id="{name}"><li>{name}'; $li = '<li id="{link}">{description}</li>'; $end = '</li></ul>';` Danke für den Tipp mit den Template-Strings. Werde ich ab jetzt nutzen.