{Javascript} div per class über jacascript ansprechen und somit das div einblenden. id steht nicht zur verfügung. was nun ? @CODEKICKER

div per class über jacascript ansprechen und somit das div einblenden. id steht nicht zur verfügung. was nun ?

                    Hallo Community

Mein vorhaben:
- Ich würde gerne per Javascript mit einem "Textlink" ein bestimmtes DIV ein/aus -blenden können.

Das Problem daran:
- Ich kann lediglich classen ansprechen
- diese classe befindet sich in einer weiteren classe und beide haben den selben classennamen
- warum das so ist ? liegt wohl daran das ich versuche ein CMS [wordpress] umzuprogrammieren und deren code echt seltsam geschrieben ist.

... naaa ... kommt ihr noch mit ? Ich versuch seit 6 tagen schon die kombination aus getelementbyid und getelementsbyclassname (hab grad net auf groß und kleinschreibung geachtet) zu basteln. ohne erfolg.

Es gibt unzählige varianten per [ID] aber keine per [CLASS].

die classe die angesprochen werden muss lautet:
.art-content-layout .art-content-layout

-> wenn ich nur die erste classe auf display:none; stelle, ist auch mein Haupt-Contentinhalt weg. Das nich so toll.

hoffe jemand hat eine idee zu dieser delikaten Aufgabe. Mir schmeckts schon längst nimmer

Lg Tomas

17.06.2011

Kreuzritter

5 ● 1 ● 2

		".art-content-layout .art-content-layout" ist keine Klasse. Erstens fangen Klassennamen nicht mit einem Punkt an, zweitens dürfen sie keine Leerzeichen enthalten. Entweder hast Du da etwas aus dem Originalcode falsch übernommen, oder Du hast einen CSS-Selektor falsch verstanden (siehe meine Antwort). Und was genau meinst Du mit "erste classe auf display:none stelle"? – Matthias Hlawatsch 17.06.2011
		mit erste classe aud Display:none; meine ich: Ich sehe mir das cms per firebug an und sehe lediglich welche klassen vorhanden sind und bei meinem einzublendenden objekt zeigt mir der firebug die klasse .art-content-layout .art-content-layout an. und wenn ich das erste .art-content-layout anspreche mit Display:none; dann wird der hauptinhalt der seite ebenfalls ausgeblendet. – Kreuzritter 17.06.2011
		Ok, und der Punkt ist: was meinst Du mit "das erste .art-content-layout anspreche"? FB zeigt mir links den HTML-Code mit den zugewiesenen Klassen. Rechts unter Styles zeigt er mir jeweils die relevanten STYLES an - das sind CSS-Anweisungen, die per Selektor u.a. auf Elemente wirken, die von einer bestimmten Klasse sind. Aber: Styles sind keine Klassen! Möglicherweise gibt es einen Style ".art-content-layout {...}" und einen weiteren ".art-content-layout .art-content-layout {...}"? Wenn es so ist, dann ist der Schlüssel zu Deinem Problem das Verständnis des Unterschieds zwischen den beiden. – Matthias Hlawatsch 17.06.2011
		Ich bin immer davon ausgegangen das jede bezeichnung mit einem "."davor eine class ist. aber gerade bin ich voll verwirrt ?=) Es ist nämlich wirklich so dass wenn ich mit dem FB mein element auswähle, dann bekomme ich ".art-content-layout .art-content-layout {...}" \| und darüber ist ein weiterer mit nur ".art-content-layout {...}". Was muss ich nun tun ?? :D Ist ja net grad so das ich lesefaul bin, gib mir einfach ne quelle in der das evtl. besser erklärt ist. das wäre aufjedenfall supernett. ich bin nämlich echt schon kaputt. seit montag sitz ich nämlich da dran -.- – Kreuzritter 18.06.2011
		Ich hab meine Antwort um ein paar Links und Erläuterungen ergänzt. Probier also mal, im Firebug den Style ".art-content-layout .art-content-layout {...}" zu manipulieren, nicht den anderen. Und wenn das das gewünschte Ergebnis liefert, so müßte auch der JQUery-Aufrzf aus meiner Antwort passen. – Matthias Hlawatsch 18.06.2011

6 Antworten

Wie wäre es mit der Nutzung von jQuery(http://jquery.com/)? Dessen Selection-Engine ist unübertroffen was das Suchen von DOM-Elementen betrifft.
Dann suchst du damit das erste AUftreten der Klasse und das Ergebnis nach einem weiteren Auftreten.

$(".myClass:first").(".myClass").hide();

Code jetzt nur aus dem Gedächtnis getippt und nicht geprüft.

17.06.2011

m.fuchs

1,8k ● 2 ● 8

ok ... das mal was neues :) Schau ich mir sofort an.

danke schon mal im vorraus.

– Kreuzritter 17.06.2011

Die Klassendeklaration im CSS nicht so:

.art-content-layout .art-content-layout

sondern so:

.art-content-layout, art-content-layout

<!DOCTYPE html>
<html>
<head>
<style>
.art-content-layout, art-content-layout {
        font-family:Verdana, Geneva, sans-serif;
        color:#000;
        font-size:14px;
        display: none;
}
.knob {
        position: absolute;
        z-index: 200;
        top: 110px;
        left: 50%;
        margin-left: 300px;
        background: #e8e3d6;
        padding-left: 30px;
        padding-right: 30px;
        line-height: 24px;
        font-family: Verdana;
        font-size: 12px;
        font-weight: bold;
        color: #FFFFFF;
        text-decoration: none;
        border: none;
}
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>
<button class="knob">Show it</button>
<div class="art-content-layout art-content-layout">test</div>
    
<script>
$("button").click(function () {
$(".art-content-layout").show("fast");
});
</script>
</body>
</html>

und im jQuery reicht ein Selector

$(".art-content-layout")

dann klappts auch ;)

17.06.2011

Mario Priebe

6,0k ● 3 ● 9

Editiert 17.06.2011

Mario Priebe

6,0k ● 3 ● 9

		Stimmt, ist ein funktionsfähiges Beispiel. Und nach Tomas' Reaktion scheint es sein Problem zu lösen (wenn er nicht nur darüber gejubelt hat, das das Beispiel läuft). Aber mich wundert Deine Style-Definition: ".art-content-layout, art-content-layout {...}" wirkt auf alle Elemente mit der Klasse "art-content-layout" und auf alle art-content-layout-Tags (die es in HTML aber gar nicht gibt). Und dem div weist Du zweimal dieselbe Klasse zu, was auch redundant ist. Der Code funktioniert auch noch, wenn man ", art-content-layout" beim Style wegläßt. – Matthias Hlawatsch 17.06.2011
		Ich hab mich auch drüber gewundert, nur hab ich das aus seiner Frage entnommen. – Mario Priebe 17.06.2011
		In der Fragestellung ist ziemlich sicher auch ein Bug, siehe mein Kommentar oben. Wir dürfen gespannt sein, in welche Richtung die Korrektur geht... Ich vermute immer noch, dass es auf geschachtelte Elemente der selben Klasse hinausläuft. Ich interpretiere nämlich die Passage mit dem Ausblenden des Haupt-Contents so, dass er da alle Elemente der Klasse ".art-content-layout" ausgeblendet hat statt nur die geschachtelten. Mal sehen, ob sich das am Ende noch aufklärt. – Matthias Hlawatsch 17.06.2011

Ich vermute mal, dass Du den Code, den dieses CMS erzeugt, noch nicht richtig verstanden hast. Die CSS-Klasse heißt einfach nur "art-content-layout". Im Unterschied zu Mario glaube ich, dass der Style, den Du in Deinem Beispiel angibst, korrekt ist. Er wirkt dann auf alle Elemente, denen die Klasse "art-content-layout" zugewiesen ist, und die, direkt oder indirekt, in einem Element drinstecken, das selbst auch wieder diese Klasse hat. Du mußt dann Dein Beispiel wie folgt ändern, damit es funktioniert:

<div class="art-content-layout">
 <div class="art-content-layout">
  test
 </div>
</div>
    
<script>
$("button").click(function () {
 $(".art-content-layout .art-content-layout").show("fast");
});
</script>

Auch in diesem Fall reicht, wie bei Mario, ein JQuery-Selektor.

Anhang
Quellen für CSS-Syntax:
z.B. SelfHTML, und dort insbesondere Formate für verschachtelte HTML-Elemente definieren

Ganz knapp:
Eine Klasse ist ein String ohne Punkt und Leerzeichen, der im class-Attribut einem HTML-Element zugewiesen wird. Mehrere Klassen für dasselbe Element sind möglich und werden durch Leerzeichen getrennt. Mehr ist da nicht, es sind einfach nur Kennzeichnungen. In der CSS-Datei werden keine Klassen beschrieben oder definiert, sondern Formate, die auf HTML-Elemente wirken, insbesondere auf solche mit einer bestimmten Klasse.
Selektoren sind der Teil eines CSS-Formats vor den {}. Mehrere unabhängige Selektoren werden durch Komma getrennt. Selektoren für geschachtelte Auswahllogik bestehen aus einer Folge von Einzelselektoren mit Leerzeichen (und ggf. weiteren Zeichen, z.B. <) dazwischen.
Beispiel: "p img" selektiert alle Bilder, die in einem Paragraph stecken. ".a .b" selektiert alle Elemente mit Klasse b, die ein übergeordnetes Element mit Klasse a haben.

JQuery benutzt die gleiche Selektorsyntax wie CSS.

In Deinem Fall geht es nach meiner Vermutung um Schachtelung. Dein CSS enthält Anweisungen für alle Elemente mit der Klasse art-content-layout, der CSS-Selektor dafür ist ".art-content-layout". Außerdem gibt es Anweisungen für Elemente der Klasse art-content-layout, die ein übergeordnetes Element der Klasse art-content-layout haben. Der Selektor dafür ist ".art-content-layout .art-content-layout". Auf ein solches inneres Element wirken beide CSS-Styles, die für alle art-content-layout und die für die geschachtelten. Entsprechend zeigt Dir Firebug beide an, wenn Du ein solches Element selektierst. Wenn Du dann den "ersten", also mit Selektor ".art-content-layout", der für alle Elemente mit der Klasse gilt, änderst, dann wirkt das auf alle, also auch auf die "äußeren" Elemente. Ich nehme an, dass das der Grund ist, warum Dir in einem Deiner Versuche der ganze Hauptcontent verschwunden ist.

17.06.2011

Matthias Hlawatsch

13,2k ● 4 ● 9

Editiert 18.06.2011

Matthias Hlawatsch

13,2k ● 4 ● 9

-1

also ... erstmal super danke .. der tipp was super und klappte auch lokal einwandfrei. Aber dann in der umsetzung :/

als ich es dann umgeschrieben habe mit dieser doll-class gings nimmer leider. vieleicht hilft ein einblick in den code:

<!DOCTYPE html>
<html>
<head>
<style>
.art-content-layout .art-content-layout {
 font-family:Verdana, Geneva, sans-serif;
 color:#000;
 font-size:14px;
 display: none;
}
.knob {
 position: absolute;
 z-index: 200;
 top: 110px;
 left: 50%;
 margin-left: 300px;
 background: #e8e3d6;
 padding-left: 30px;
 padding-right: 30px;
 line-height: 24px;
 font-family: Verdana;
 font-size: 12px;
 font-weight: bold;
 color: #FFFFFF;
 text-decoration: none;
 border: none;
}
</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>
<button class="knob">Show it</button>
<div class="art-content-layout art-content-layout">test</div>
    
<script>
$("button").click(function () {
$(".art-content-layout").(".art-content-layout").show("fast");
});
</script>
</body>
</html>

Lg Tomas

17.06.2011

Kreuzritter

5 ● 1 ● 2

-1

Danke !!!!!!! Es klapt!!!!! endlich viiielen vieelen dank!!!!

17.06.2011

Kreuzritter

5 ● 1 ● 2

-1

                    hmm ... der ie macht nicht mit. ich hasssssee es !!! immer wieder!!! nichteinmal der ie9 kappiert des ... und nun ? also von vorne ...

lg tomas

@mario //es war deine lösung die geklapt hat. die zweite variante hatte ich nicht gesehen weil ich mein jubel fast zeitgleich mit matthias veröffentlichte.
und so tief könnte ich nichteinmal eingreifen wie bei matt, weil der eingeblendete kontentbereich dynamisch erzeugt wird. (denke ich, sorry falls ich falsch liege)

17.06.2011

Kreuzritter

5 ● 1 ● 2

Editiert 17.06.2011

Kreuzritter

5 ● 1 ● 2

		Also, bei mir (IE 8 auf Win 7) funktionieren sowohl Marios als auch mein Beispiel. Ansonsten: die Idee bei codekicker ist nicht die eines Forums, bei dem jeder Post eine Antwort auf den vorigen ist (die Reihenfolge der Anzeige ist nämlich von der Bewertung abhängig, erst dann von der Zeit), sondern folgt dem Prinzip: 1 Frage, die das Problem formuliert - n Antworten mit Lösungsvorschlägen - m Kommentare zu jeder Antwort, mit Danksagungen, Verbesserungsvorschlägen, sonstigem Feeddback. Sprich: am besten schreibst Du als Kommentar zu den jeweiligen Antworten, was funktioniert hat und was nicht. – Matthias Hlawatsch 17.06.2011
		oh das war keine absicht ... ich mehr als nur dankbar. ich find das super das ich mal auf eine seite gestossen bin einer der fragen hat auch wirklich antworten bekommt. danke nochmal euch beiden. ich muss halt mal schaun warum der ie bei mir nicht mitmacht. – Kreuzritter 17.06.2011
		Bitte, gerne! Vergiß nur nicht, am Ende auch durch Bewertungen zu verdeutlichen, welche Antwort Dir geholfen hat ;-) Zu Deinem Edit: ich glaube nicht, dass Du tief eingreifen mußt, um meinen Vorschlag zu verwirklichen. Wenn ich Dein Problem richtig verstanden habe, brauchst Du nur die eine Zeile Javascript mit dem JQuery-Aufruf. Alles andere sollte doch schon da sein, oder? – Matthias Hlawatsch 17.06.2011
		stimmt. jap so sollte das laufen. – Kreuzritter 17.06.2011

Stelle deine Javascript-Frage jetzt!

Kontakt, Impressum, Lizenz, AGB