slideToggle; Alle Divs einer ID/Class ansprechen

chaot1091 · 13. November 2019 um 15:07

Hallo!

Ich generiere über ein CMS eine Ausgabe folgendem Schemas:

[Email](javascript:void(0)
DIV INHALT

Das slideToggle funktioniert auch einwandfrei, jedoch wird immer nur das obere DIV angesprochen, ich möchte aber, dass beide DIVS ein/ausgeblendet werden, wenn man auf (egal welchen) einen der Links klickt.

Da diese Anwendung sehr dynamisch generiert wird, ist es leider hinderlich, den DIVs unterschiedliche IDs/Classes zu geben.

Freue mich über Hilfe…!

Viele Grüße, David.

Patrick_efd88d · 13. November 2019 um 15:07

Man eine id nicht mehrmals vergeben, denn, wie der name schon sagt, ist sie dazu da, eindeutig Elemente unterscheiden zu können.
Deswegen wird auch nur das obere div ein/ausgeblendet, weil ja davon ausgegangen wird, dass die id sowieso nur einmal vorkommen wird.

Wenn du class statt id benutzt sollte es funktionieren.

Lucidus · 13. November 2019 um 15:07

Hi,

da mehrere Elemente mit gleicher ID kein valides HTML und somit nicht unterstützt ist würde ich vorschlagen du nimmst stattdessen Klassen und machst dann etwas in der Art:

$(function() {
$(’.toggleshow’).click(function(){
$(‚li .Email‘).slideToggle(‚slow‘);
});
});

// …

[Email](javascript:void(0)
DIV INHALT

Gruß,
Lucidus

Rasta_5dd9c7 · 13. November 2019 um 15:07

Hallo David,

Hier sind Klassen die richtige Wahl. Alle Links die die gleiche Aktion bei Klick ausführen sollen bekommen eine Klasse (z.B. tooltip).

[Email](javascript:void(0)
DIV INHALT

Den jQuery-Code lagerst du in eine externe Datei aus die du dann im Head einbindest. In dieser JavaScript-Datei steht dann folgendes.

//globale Funktion die erst aufgerufen wird wenn das die Seite komplett geladen ist.
$(function()
{
//Bindet das Klick-Event an alle Elemente mit der Klasse ‚tooltip‘
$(’.tooltip’).click(function(e)
{
//Wählt ausgehend vom aktuell geklickten Element das nächste Element und führt hier slideToggle aus.
$(this).next().slideToggle(‚slow‘);
//verhindert das Standardverhalten eines Links, also einen Request auf den href
e.preventDefault();
});
});

Tipp: Der Selector den du $(‚hier‘) angibtst ist ein CSS 3 Selector. D.H. du kannst auch unabhängig von ID oder Klasse Element selektieren.

Stecken deine uls z.B. in einem Div mit der ID ‚navigation‘ kannst du statt:

$(’.tooltip’).click(…

aus sowas mach:

$(’#navigation > ul > li’).click( …

Viel Erfolg
Gruß,
Kristof

Rasta_5dd9c7 · 13. November 2019 um 15:07

Nachtrag:
Die Klasse tooltip muss natürlich das Element erhalten.

mr_eckardt · 13. November 2019 um 15:07

Hallo David,

die Ursache:
Du benutzt das HTML Tag Attribut „Id“ als Klasse und nicht als globalen Identifikator. Id Attribute sind dazu da einzigartige Elemente in HTML auszuweisen, deshalb sucht jQuery (welches Du mit dem $() aufrufst) nur ein einzelnes passendes Element, auf welches es dann die slideToggle function anwendet.

die Loesung:
Was Du brauchst ist das HTML Tag Class Attribut. Dieses Attribut zeichnet eine Klasse beliebig vieler Elemente aus. jQuery sucht entsprechend alle Elemente einer Klasse, die ueber den selector (den text in dem jQuery Aufruf: $(selector)). Also: richtig waere Dein Code wie folgt:

[Email](javascript:void(0)
DIV INHALT

der Unterschied:

die email divs haben anstelle des Attributs id=„Email“ jetzt ein class Attribut: class=„Email“
der jQuery selector bezieht sich jetzt auf class Attribute ‚.Email‘ anstelle des Id attributs ‚#Email‘

ich hoffe ich konnte Dir helfen,

Max

thom23 · 13. November 2019 um 15:07

Hallo David,

es darf auf keinen Fall zweimal dieselbe ID (Email) verwendet werden, da einerseits für eine korrekte Syntax IDs immer einzigartig sein müssen und andererseits die Funktion automatisch nur das erste Vorkommen der ID anspricht. In diesem Fall müsste also mit Klassen gearbeitet werden - hier werden beide DIVS ein/ausgeblendet, egal welcher der beiden Links angeklickt wird:

[Email](javascript:void(0)
DIV INHALT

Um zu erreichen, dass sich nur das DIV bewegt, welches zu dem jeweiligen Link gehört, kann z.B. jQuery alle ULs durchgehen und jeweils das betreffende LI/DIV ansprechen:

Email
DIV INHALT

$(document).ready(function() {
var elem = $(’.emailToggle’);
elem.each(function(i, jObj) {
el = $(jObj).find(‚li‘);
if (el.length > 0) {
$(‚li‘, jObj).click(function() {
$(’.Email’, jObj).slideToggle(‚slow‘);
return false;
});
}
});
});

Ich hoffe, ich konnte weiterhelfen.

Viele Grüsse
thom23

ichjetzthier · 13. November 2019 um 15:07

Hi David,

eine ID ist einzigartig und darf nur einmal auftauchen. Wenn du mehrere Elemente gleichzeitig ansprechen möchtest, musst du mit Klassen arbeiten.

Sprich: Beide DIVs mit derselben Klasse bezeichnen und dann die Klasse ansprechen/animieren, dann sollte es gehen.

MfG

chaot1091 · 13. November 2019 um 15:07

Hallo…! Besten dank für die Antwort. Kurz nach dem absenden der Mail bin ich von selbst drauf gekommen, wahrscheinlich war die Nacht zu vir zu kurz oder der Kaffee kalt Trotzdem herzlichen dank, Gruß, David.

Harveyhase · 13. November 2019 um 15:07

Hallo!

Ich verwende in meinen Projekten jQuery, da geht das mit den Auflistungen prima, in reinem Javascript müsstest du das DOM bedienen, da stehen alle DIV’s drinnen und müssten so nacheinander angesprochen werden können…

leider kann ich im Moment kein Testprojekt machen, bin zu sehr in Zeitstress, schau mal auf http://de.selfhtml.org/javascript/ vielleicht findest du was.

lg
Alexander

Alex_7cc01c · 13. November 2019 um 15:07

Hallo,

ich hoffe die Antwort kommt nicht allzu spät.
Du musst ein globals Javascript schreiben, welches dann alle Divs mit einer bestimmten Klasse anspricht.

jQuery(document).ready(function() {
$(‚li.clicks‘).click(function{
$(‚div.toggle‘).slideToggle(‚slow‘);
})
});

[Email](javascript:void(0)
DIV INHALT

Im Übrigen ist Dein HTML ungünstig aufgebaut. Die LIs und ULs werden nicht wieder zugemacht und ich würde auf den Link ganz verzichten. So sähe das dann aus, noch nicht im Browser getestet:

jQuery(document).ready(function() {
$(‚li.clicks‘).click(function{
$(‚div.toggle‘).slideToggle(‚slow‘);
})
});

- Email

DIV INHALT

- Email

DIV INHALT

cored0wn · 13. November 2019 um 15:07

Hey,

das Problem liegt vermutlich an der ID. Du kannst nur einem DOM Element eine ID geben. Und hier gilt, wer zuerst kommt dem gehörts. D.h. du hast zuerst dem 1. DIV die ID „Email“ zugeordnet also ist dass auch das entsprechende DIV. Entweder zu änderst die ID in eine class also $(’.email’)… und class=„email“ oder du weist jedem Element eine eindeutige ID zu (wie es ja auch sein sollte beim Umgang mit ID’s) und sprichst es dann wiefolgt an $(’[id^=email]’)… somit würden alle Elemente angesprochen werden, deren ID mit email beginnt… Bsp:

Hoffe ich konnte dir damit helfen. Sollte das nicht das Problem gewesen sein, geb bitte bescheid.

LG
cored0wn