| 

.NET C# Java Javascript Exception

3
Hallo zusammen,

ich versuche gerade mehrere divs innerhalb eines mainDivs über ein img das sich ebensfalls in diesen mainDivs befindet anzusprechen. Natürlich könnte ich das jetzt mit eindeutigen id's oder klassen versehen und dann mich mit show/hide etc. ansprechen ... aber:

Ich wollte es etwas flexibler gestalten.

der aufbau:
<div class="main"> <img src="irgendwas.bla">
<div class="tooltip">1. bla</div>
<div class="tooltip">2. blabla</div>
<div class="tooltip">3. blablabla</div>
</div>

<div class="main"> <img src="irgendwie.bla">
<div class="tooltip">1. ble</div>
<div class="tooltip">2. bleble</div>
<div class="tooltip">3. blebleble</div>
</div>

<div class="main"> <img src="irgendwo.bla">
<div class="tooltip">1. bli</div>
<div class="tooltip">2. blibli</div>
<div class="tooltip">3. bliblibli</div>
</div>


was ich versuche zu erreichen ist:
dass wenn ich über ein Bild mit der Maus fahre die Tooptip-divs eingeblendet werden (egal wieviele) und dann wieder rückgängig (ausbleden onmouseout).

soweit bin ich bisher gekommen:

1. wenn ich über ein Bild fahre, dann erhält es die klasse "active"
2. dieses wird dann mit einer animation versehen (unwichtig)
3. nun der nichtfunktionierende part: Ich frage ab, ob das Bild kinder hat. Wenn ja, dann show();. Aber es klappt nicht -.-

hier der code:
$( document ).ready(function() {

$('.main img').mouseover(function() {

// Set Active
$(this).addClass('active');

// Object ZoomIn
$(this).animate({
height:"309",
marginTop:"0"
}, 50);

// Show Info
if ($(this).children().length > 0) {
$(this).show();
};

});

$('.main img').mouseout(function() {

// Object ZoomOut
$(this).animate({
height:"259",
marginTop:"50"
}, 50);

// Hide Info
$(this).removeClass('active');

});

});


Fazit:
Warum werden die tooltips nicht angezeigt? Irgend wer nen tip?

MFG GioCece
News:
15.07.2013
GioCece 152 1 6
Bezieht sich in deinem Fall das "this" nicht auf dein "main img" Element? Würde in diesem Fall dann auch nur das einblenden.
mrmee 15.07.2013
'.main img' selektiert die Bilder, nicht die DIV's mit der Klasse '.main'. Und die Bilder haben keine Child's.
Floyd 15.07.2013
ok verstehe, das bedeutet ja dan aber das ist eine abfrage starten müsste die ungefähr so lautet: Wenn ein Bild die Klasse "active" hat, dann schau nach ob der div mit der klasse "main" inde sich das aktive Bild befindet kinder hat. Und wenn ja, dann zeige mir diese an... also müsste ich ja eine Doppelabfrage auf ein objekt innerhalb einer if-schleife machen? spricht: überprüfe ob bild mit kolasse active, wenn ja, dann prüfe ob das div, das das bild mit der klasse aktiv hat, kinder hat. Denke ich da richtig rum?
GioCece 15.07.2013
ohman hab ich heute gutes deutsch drauf xD
GioCece 15.07.2013
also nochmal: Ich muss eine if-abfrage starten die folgendes prüft:
- prüfe ob ein bild die klasse active hat, wenn ja
- prüfe ob der div xy das das aktive bild enthält noch kinder-elemente hat, wenn ja
- zeige diese an
richtig?
GioCece 15.07.2013
1 Antwort
1
Also ich würde sowas probieren.

$('.active').children('div').each(function () {
alert(this.value); // "this" is the current element in the loop
});


Wobei du deinem "main" div die Klasse "active" geben musst, da dein img keine Children hat.

siehe auch hier
15.07.2013
mrmee 745 1 8
ich habs grad so hinbekommen:
[code]
$('div.main:has(img.active)').find('.tooltip').show();
[/code]

wobei ich grad überlege welche mehr sinn macht ... ich probiers mal aus.
GioCece 15.07.2013

Stelle deine Javascript-Frage jetzt!