PHP + Javascript Toggle

[iApple]

Hallo zusammen,

ich stehe vor einem kleinen Problem. In einer PHP-Datei werden als Liste die Datensätze aus meiner MySQL Datenbank geladen - bei jeder Liste ist an der rechten Seite ein Button "span" mit dem Namen Optionen - wenn dieser gedrückt wird, erscheint ein kleines Dropdown-Menu per Javascript

$(document).ready(function () {
            $('span.SSListActiveOptionsLabel').click(function () {
            $('div.SSListActiveOptenDropMenu').slideToggle('medium');
            });
        });

Nun habe ich natürlich mehrere Datensätze (3) und somit auch bei jedem Item auch einen Options-Button, was auch so sein muss - jedoch wenn ich auf irgendein Datensatz auf Optionen klicke öffnet es natürlich bei jedem Item diese Liste... wie kriege ich das ganze nun hin, dass nur das jeweilige Element (sprich Options-Box) geöffnet wird und nicht alle? Es kommen ja immer neue Datensätze in der Datenbank hinzu, und ich erstelle ja bestimmt nicht für jedes eine eigene Span und Div Klasse und füge diese im oberen Script-Code ein...


Danke schonmals

 

[Myhar]

AW: PHP + Javascript Toggle

Jedem div und span eine andere Klasse zuweisen wäre möglich, aber hier nicht sinnvoll.
Besser wäre es, die Funktion so umzuschreiben, dass zu jedem span das zugehörige div öffnet. Mit jQuery ist es einfach,

Bitte kostenlos registrieren, damit du die Links siehst.

zB so (das wird bei dir nicht funktionieren, da ich deinen HTML Aufbau nicht kenne. Jedoch wirst du das selber auch richtigstellen können, da habe ich vollstes Vertrauen in dich.

$(document).ready(function () {
    $('span.SSListActiveOptionsLabel').click(function () {
       $(this).parent().next().find('div.SSListActiveOptenDropMenu').slideToggle('medium');
        });
    });

 

[iApple]

AW: PHP + Javascript Toggle

Vielen Dank - ich bin leider überhaupt kein JS und JQuery Profi... der obere Code-Schnippsel habe ich auch aus dem Internet

Vielleicht könntest du mir trotzdem weiterhelfen - unten mein HTML-Aufbau

<div class="SSListActiveWrapper">
            <span class="SSListActiveDaysLeftNumber">33</span><span class="SSListActiveDaysLeftContent">Days Left</span>
            <div class="SSListActiveLabel">
                <span class="SSListActiveInnerLabel">active</span>
            </div>
            <div class="SSListActiveContentWrapper">
                <span class="SSListActiveID">ID: 7</span><span class="SSListActiveName">jET W2510HPQ HD+</span>
            </div>
            <div class="SSListActiveCreateDateWrapper">
                <span class="SSListActiveSortLabel">Sortierung:</span><span class="SSListActiveSortNumber">3</span>
            </div>
            <div class="SSListActiveToolsWrapper">
                <a href="#"><span class="SSListActiveOptionsLabel">optionen</span></a>
                <div class="SSListActiveOptenDropMenu">
                    
                </div>
            </div>
        </div>

Der ganze Code-Block ist ein einziges Element also wenn ich 3 Datensätze habe, wiederholt sich der Code ganze 3mal....

Danke

 

[Myhar]

AW: PHP + Javascript Toggle

Man merkt, dass du keine Ahnung von HTML Code hast, wenn man den HTML Code anschaut. Fürchterlich. Sorry, wenn ich das so direkt sage.
Ein Link (der schon einen onclick Event hat) mit einem Span drinnen, dem dann per Javascript ein onclick Event zugewiesen wird... Und der Link selber hat kein Ziel. Was will man mehr an semantisch unsinnigem HTML Code. :-D
Zu deinem Problem:
$(this) ist das aktuelle Element, dann gehe man ein Element im DOM Baum rauf, man hat
$(this).parent() damit man bei dem meiner Meinung nach unnötigen a Element ist. Dann noch ein Element rauf, damit man bei div.SSListActiveToolsWrapper ist -> Macht $(this).parent().parent(). Dann noch ein Element weiter, damit man bei div.SSListActiveOptenDropMenu ist, macht $(this).parent().parent().next(). Damit kommst du von deinem Element zu dem gesuchten Element. Als letztes noch den toggle-Effekt:
$(this).parent().parent().next().slideToggle('medium');

 

[iApple]

AW: PHP + Javascript Toggle

Der Code stammt nicht von mir, sondern ist die Basis für das neue Design - ich weiss dass dieser nicht optimal ist... das a Element habe ich jetzt rausgeschmissen, da mein Vorgäng damit nich irgendein Modal-View aufgerufen hat....

Momentaner Stand:

<div class="SSListActiveWrapper">
            <span class="SSListActiveDaysLeftNumber">33</span><span class="SSListActiveDaysLeftContent">Days Left</span>
            <div class="SSListActiveLabel">
                <span class="SSListActiveInnerLabel">active</span>
            </div>
            <div class="SSListActiveContentWrapper">
                <span class="SSListActiveID">ID: 7</span><span class="SSListActiveName">jET W2510HPQ HD+</span>
            </div>
            <div class="SSListActiveCreateDateWrapper">
                <span class="SSListActiveSortLabel">Sortierung:</span><span class="SSListActiveSortNumber">3</span>
            </div>
            <div class="SSListActiveToolsWrapper">
                <span class="SSListActiveOptionsLabel">optionen</span>
                <div class="SSListActiveOptenDropMenu">
                    
                </div>
            </div>
        </div>

Kannst du mir nun den gesamten JS-Code geben? Wie ich Ihn dann 1:1 einfügen kann? Wäre sehr nett

Gruss

 

[Myhar]

AW: PHP + Javascript Toggle

Ich habe dir den kompletten JS Code schon gegeben. Lediglich das DOM Traversing in meinem letzten Post musst du anpassen, wenn du das a Element entfernt hast. Wie das geht habe ich aber in meinem Post gut erklärt. Du musst lediglich noch copy-paste machen, dann hast du die Lösung

 

[iApple]

AW: PHP + Javascript Toggle

Also ich hab das ganze so verstanden

$(document).ready(function () {
            $(this).parent().next()('span.SSListActiveOptionsLabel').click(function () {
                $(this).parent().parent().next().find('div.SSListActiveOptenDropMenu').slideToggle('medium');
            });
});

Aber das funktioniert nicht....

 

[Myhar]

AW: PHP + Javascript Toggle

Nein, du hast meinen Post wohl nicht verstanden.

[blabla... ]Als letztes noch den toggle-Effekt[blabla...]

Ich habe dir jeden Schritt (also jeden Teil des Codes einzeln erklärt) und was er tut. Da ist nichts von .find()
Wo ich mich wohl geirrt habe ist die Anzahl von Elementen, die du den DOM Baum nach oben gehen musst. Bei diesen langen, ähnlichen Klassennamen kann das schon mal passieren, da habe ich mich wohl verschaut. Du musst wohl kein Element nach oben gehen, es reicht aus, ein Element weiter zu gehen.

Zur Erklärung was dein Code tut:
Er geht zuerst ein Element nach oben (dann ist er bei dem div.SSListActiveToolsWrapper) um dann noch ein Element nach oben zu gehen (zu div.SSListActiveWrapper) um dann ein Element weiter zu gehen auf der selben Hierarchieebene. Wo er dann ist, kann man nicht sagen

 

[Milly]

AW: PHP + Javascript Toggle

@iApple
Ich habe diesen Thread verfolgt und bin auch der Meinung das anscheinend Grundlegendes Verständnis fehlt. Myhar hat dir in seinem ersten Beitrag sehr gut erklärt wie der Baum "abgearbeitet" werden kann.

Was genau hast du denn nun nicht verstanden? Wir können gerne nochmal ins Detail gehen, aber dazu müssen wir wissen was du nicht verstanden hast.

Grüße
Milly

 

[iApple]

AW: PHP + Javascript Toggle

Hi zusammen,

mittlerweile habe ich es auch begriffen Ja ich kenne mich mit Javscript überhaupt nicht aus, das soll sich aber bald ändern

Also das ganze Script funktioniert nun - wie gesagt, ich hab da was falsch interpretiert

Vielen Dank für eure Hilfe

 

[Milly]

AW: PHP + Javascript Toggle

Klasse, wenn es geschnackelt hat - denn nur so lernt man!

Grüße
Milly