Autor |
Nachricht |
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Mi 25.03.2009 16:48
Titel [jQuery] - Kindelemente ansprechen |
|
|
hallo ich habe folgendes markup
HTML
Code: |
<div class="wrapBlock">
<h1>Headline</h1>
<div>
<p>
das ist einleitender text
<br /><br />
<em>
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
</em>
</p>
</div>
</div>
|
das em element habe ich via CSS ausgeblendet
folgend mal das jQuery zeugs.
Code: |
$(document).ready(function() {
$("p").mouseover(function(){
$(this).css("cursor","pointer");
});
$("p").click(function(){
if ($(this).next("em").is(":hidden")) {
$(this).next("em").slideDown("slow").css("display","inline-block");
} else {
$(this).next("em").slideUp("slow").css("display","none");
}
});
});
|
das markup von oben wiederholt sich mehrere male.
und der em-part soll dementsprechend nur bei dem aktuell geklickten element sichtbar werden.
nur funzt das irgendwie nicht.
bei einem anderen projekt klappt es wunderbar.was läuft hier schief?
|
|
|
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Do 26.03.2009 10:43
Titel
|
|
|
also das problem hier ist wohl das inline-element 'em' welches sich nicht steuern läßt.
bild ich daraus ein div und spreche in der function dieses als nächstes element an dann läuft es.
leider kann ich das em, ginge auch span, nicht als Blockelement definieren, da dieses im normalzustand nicht zu sehen sein soll.
CSS
Code: |
div.wrapBlock {
margin-top:10px;
width:500px;
background:#F0F0F0;
border:1px solid #535353;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding-top:5px;
padding-left:5px;
}
div.wrapBlock h1:first-child {
background:#ccc;
display:block;
width:495px;
padding:5px;
margin-top:-5px;
margin-left:-5px;
font-size:12px;
font-weight:bold;
}
div.wrapBlock p {
padding:0;
margin:0;
}
div.wrapBlock .inner > div {
display:none;
margin:0;
padding:0;
}
|
HTML (schlechtes markup da Block in Inline)
Code: |
<div class="wrapBlock">
<h1>Überschrift</h1>
<div class="inner">
<p>
Lorem ipsum
<br /><br />
<div>
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
</div>
</p>
</div>
</div>
<div class="wrapBlock">
<h1>Überschrift</h1>
<div class="inner">
<p>
Lorem ipsum
<br /><br />
<div>
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
</div>
</p>
</div>
</div>
|
jQery
Code: |
$(document).ready(function() {
$("p").mouseover(function(){
$(this).css("cursor","pointer");
});
$("p").click(function() {
if ($(this).next("div").is(":hidden")) {
$(this).next("div").show("slow").css("display","block");
} else {
$(this).next("div").hide("slow");
}
});
});
|
das ganze läuft automatisch in Typo3 ab.
ich habe leider nicht die Möglichkeit das MarkUp beliebig anpassen zu können.da es für die redakteure später flexibel sein soll.d.h. ich habe nur ein inline-element zur verfügung.die möglichkeiten des wrappens mittels TypoScript habe ich ausgereizt.
hat mir jemand eine idee wie ich auch inlineelmente (ohne dieses in ein blockelement zu setzen) mittels dem framework anzeigen zu lassen?
//ich habe jetzt ein kleines zwischenergebniss welches fast funktioniert
Code: |
$(document).ready(function() {
$("p").mouseover(function(){
$(this).css("cursor","pointer");
});
var n = 0;
$("div.wrapBlock").one("click", function(){
var index = $("div.wrapBlock").index(this);
if($(this).find("em").is(":hidden")) {
$(this).find("em").slideDown("slow").css("display","block");
} else {
$(this).find("em").slideUp("fast").css("display","none");
}
});
});
|
es ist jetzt so das er das em-element findet und auch nur das welches geklickt wird angezeigt wird.
problem bei der sache ist, das bei erneutem klick der em nicht mehr ausgeblendet wird.
//ok habe den fehler gefunden
Code: | $("div.wrapBlock").one("click", function(){ |
durch meine anfangsgezeigte zeile
Code: | $("div.wrapBlock").click(function(){ |
tauschen.
grüße
Zuletzt bearbeitet von Kash am Do 26.03.2009 11:57, insgesamt 2-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 26.03.2009 13:36
Titel
|
|
|
Wie siehts mit
Code: |
display: inline-block;
|
aus? Geht das denn?
|
|
|
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Do 26.03.2009 13:51
Titel
|
|
|
hallo smooth, ich hatte den fehler behoben.
falls es von interesse ist nochmal der dummy in voller länge
Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>jQuery Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="xxx" />
<style type="text/css">
div.wrapBlock {
margin-top:10px;
width:500px;
background:#F0F0F0;
border:1px solid #535353;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding-top:5px;
padding-left:5px;
}
div.wrapBlock h1:first-child {
background:#ccc;
display:block;
width:495px;
padding:5px;
margin-top:-5px;
margin-left:-5px;
font-size:12px;
font-weight:bold;
}
div.wrapBlock p {
padding:0;
margin:0;
}
div.wrapBlock .inner em {
display:none;
margin:0;
padding:0;
}
</style>
<script type="text/javascript" src="library/jquery-1.3.2.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("p").mouseover(function(){
$(this).css("cursor","pointer");
});
var n = 0;
$("div.wrapBlock").click(function(){
var index = $("div.wrapBlock").index(this);
if($(this).find("em").is(":hidden")) {
$(this).find("em").slideDown("slow").css("display","block");
} else {
$(this).find("em").slideUp("slow");
}
});
});
//-->
</script>
</head>
<body>
<div class="wrapBlock">
<h1>Überschrift</h1>
<div class="inner">
<p>
Lorem ipsum
<br /><br />
<em>
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
</em>
</p>
</div>
</div>
<div class="wrapBlock">
<h1>Überschrift 2</h1>
<div class="inner">
<p>
Lorem ipsum
<br /><br />
<em>
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
Lorem ipsum Lorem ipsum<br />
</em>
</p>
</div>
</div>
</body>
</html>
|
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Do 26.03.2009 15:29
Titel
|
|
|
ausm kopp bin ich mir gerade nicht zu 100% sicher, aber um nur das nächste folgende element in jquery anzusprechen, hättest du statt next
nehmen können. versuchs mal...
|
|
|
|
|
Kash
Threadersteller
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Do 26.03.2009 16:03
Titel
|
|
|
das test ich mal.
jetzt nutze ich ja .find("foo")
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Do 26.03.2009 18:28
Titel
|
|
|
Kash hat geschrieben: |
jetzt nutze ich ja .find("foo") |
hab ich gesehen. ich habe nur im kopp, dass ich die variante mit dem "+" bei ner menge toggle-funktionen nehme, um nur das nächste element seiner art anzusprechen. klappt 1a
also, vielleicht fürs nächste mal...
|
|
|
|
|
|
|
|
Ähnliche Themen |
[CSS] - Kindelemente ansprechen
einzelenen link mit jquery ansprechen
jQuery - folgende Elemente ansprechen
jQuery Link in Liste ansprechen
Fehlende Kindelemente in Baumstruktur - Bug in PHP 4?
a:active funktioniert nicht auf kindelemente?
|
|