nicht angemeldet
mehrere divs ansprechen
Hallo,
ich habe mehrere divs die so aussehen:
<div id="latestNewsShortcut1">HeaderText</div>
<p id="latestNewsText1" style="display: none">Text ...</p>
<div id="latestNewsShortcut2">HeaderText</div>
<p id="latestNewsText2" style="display: none">Text ...</p>
Was ich jetzt erreichen möchte ist das, wenn ich ein <div> und ein <p> hinzufüge, dass ich dann nicht den ganzen Script- Code unten kopieren und nochmal für die neuen id's hinzufügen muss.
Was ich jetzt aber nicht weiß ist, wie ich das realisieren kann, das ich nur den Scriptcode unten hab und wenn ein neues div und p hinzukommt, das diese genau das gleiche Verhalten haben.
Vielen Dank für Hilfe.
lg
<script>
$("#latestNewsShortcut1").hover(function () {
$(this).css({fontWeight:"bold"});
$(this).css("text-decoration", "underline");
},function() {
if(!$("#latestNewsText1").is(":visible")) {
$(this).css({fontWeight:"normal"});
$(this).css("text-decoration", "none");
}
}
);
$("#latestNewsShortcut1").click(function () {
$("#latestNewsShortcut1").css({});
if($("#latestNewsText1").is(":visible")) {
$("#latestNewsShortcut1").css({fontWeight:"normal"});
$("#latestNewsText1").hide("fast");
}
else {
$("#latestNewsShortcut1").css({fontWeight:"bold"});
$("#latestNewsText1").show("fast");
}
});
</script>
-
An dieser Stelle solltest Du die IDs vielleicht durch eine gemeinsame Klasse im div-Tag ersetzen und die Selektion darauf beziehen.
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
und die Selektion darauf beziehen.
Hallo,
besten Dank für den Tipp, was mir jetzt noch nicht ganz klar ist, wie ich das machen kann, dass ich die Selektion auf ein Element beziehen, wenn alle zur gleichen Klasse gehören?
Vielen Dank,
lg -
An dieser Stelle solltest Du die IDs vielleicht durch eine gemeinsame Klasse im div-Tag ersetzen und die Selektion darauf beziehen.
Gruß, LX
Ich hab jetzt folgendes gemacht (siehe unten). Wenn ich auf einen Text klicke, dann geht auch der weite mit auf. Wie kann ich das machen, damit nur der Text, den ich geklickt hab, aufgeht.
Vielen Dank,
lg<%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="http://code.jquery.com/jquery-1.4.4.js"></script> <title>JSP Page</title> </head> <body> <h1>Hello World!</h1> <div id="latestNews"> <div id="latestNewsHeader">Letzte Neuigkeiten</div> <br /> <div class="latestNewsShortcut">Header1</div> <p class="latestNewsText" style="display: none">text...</p> <br /> <div class="latestNewsShortcut">Header2</div> <p class="latestNewsText" style="display: none">text...</p> <br /> </div> <script> $(".latestNewsShortcut").hover(function () { $(this).css({fontWeight:"bold"}); $(this).css("text-decoration", "underline"); },function() { if(!$(".latestNewsText").is(":visible")) { $(this).css({fontWeight:"normal"}); $(this).css("text-decoration", "none"); } } ); $(".latestNewsShortcut").click(function () { if($(".latestNewsText").is(":visible")) { $(".latestNewsShortcut").css({fontWeight:"normal"}); $(".latestNewsText").hide("fast"); } else { $(".latestNewsShortcut").css({fontWeight:"bold"}); $(".latestNewsText").show("fast"); } }); </script> </body> </html>-
Hallo!
Wie kann ich das machen, damit nur der Text, den ich geklickt hab, aufgeht.
Einfach innerhalb der Event-Callbacks bei der Selektion als 2. Parameter "this" angeben, dann wird nur innerhalb des geklickten Bereichs selektiert. Falls die Elemente in einem darüberliegenden Node liegen, musst Du dieses als Ausgangspunkt nehmen (siehe parent()-Methode).
Gruß, LX
--
RFC 1925, Satz 2: Egal, wie fest man schiebt, ganz gleich, wie hoch die Priorität ist, man kann die Lichtgeschwindigkeit nicht erhöhen.-
Hallo,
vielen Dank mal für die Rückmeldung,
ich habs jetzt so versucht wie unten aber ich habs leider nicht gescahfft, das zu implementieren,
Könntest Du mir vielleicht ein Beispiel geben, wie ich this in der Funktion einsetzen kann.Vielen Dank,
lg$(".latestNewsShortcut").click(this, function () { $(".latestNewsShortcut").css({}); if($(".latestNewsText").is(":visible")) { $(".latestNewsShortcut").css({fontWeight:"normal"}); $(".latestNewsText").hide("fast"); this.hide... geht leider nicht } else { $(".latestNewsShortcut").css({fontWeight:"bold"}); $(".latestNewsText").show("fast"); } });
-
-
-