meerdere classes waarvan er maar 1 moet activeren
De titel is wat moeilijk te begrijpen maar waar ik op doel is het volgende:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$(document).ready(function() {
$('.item').mouseenter(function(){
$('.item > div').show();
});
$('.item').mouseleave(function(){
$('.item > div').hide();
});
});
$('.item').mouseenter(function(){
$('.item > div').show();
});
$('.item').mouseleave(function(){
$('.item > div').hide();
});
});
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="item">
<div class="close" hidden>
<p>X</p>
</div>
</div>
<div class="item">
<div class="close" hidden>
<p>X</p>
</div>
</div>
<div class="item">
<div class="close" hidden>
<p>X</p>
</div>
</div>
<div class="item">
<div class="close" hidden>
<p>X</p>
</div>
</div>
<div class="close" hidden>
<p>X</p>
</div>
</div>
<div class="item">
<div class="close" hidden>
<p>X</p>
</div>
</div>
<div class="item">
<div class="close" hidden>
<p>X</p>
</div>
</div>
<div class="item">
<div class="close" hidden>
<p>X</p>
</div>
</div>
Als ik met mijn muis op een 'item' kom, wil ik dat er een X tevoorschijn komt. Zodra de muis eruit gaat, moet de X verdwijnen. Dit heb ik op deze manier proberen te bewerkstelligen maar tevergeefs. Hij activeert ze allemaal. Weet iemand hoe ik dit (beter) kan oplossen?
Alvast hartstikke bedankt
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$(document).ready(function() {
$('.item').mouseenter(function(){
$(this+'>div').show();
});
$('.item').mouseleave(function(){
$(this+'>div').hide();
});
});
$('.item').mouseenter(function(){
$(this+'>div').show();
});
$('.item').mouseleave(function(){
$(this+'>div').hide();
});
});
Gewijzigd op 23/09/2012 20:50:32 door Nick Dijkstra
Toevoeging op 23/09/2012 21:09:44:
wat ik probeer te krijgen is als ik op 1 van de 4 vlakken sta, dat alleen die ene X tevoorschijn komt, en niet die andere 3 ook. Dat gebeurt er nu.
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$(document).ready(function() {
$('.item').mouseenter(function(){
$(this).children().show();
});
$('.item').mouseleave(function(){
$(this).children().hide();
});
});
$('.item').mouseenter(function(){
$(this).children().show();
});
$('.item').mouseleave(function(){
$(this).children().hide();
});
});
Gewijzigd op 23/09/2012 21:14:27 door Nick Dijkstra
snel even een vraagje, children heeft ()
wat kan daar tussen komen te staan? gewoon nieuwsgierig hoor
selector: A string containing a selector expression to match elements against.
Example: Find all children with a class "selected" of each div.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size:16px; font-weight:bolder; }
p { margin:5px 0; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<div class="selected">And Again</div>
<p>And One Last Time</p>
</div>
<script>$("div").children(".selected").css("color", "blue");</script>
</body>
</html>
<html>
<head>
<style>
body { font-size:16px; font-weight:bolder; }
p { margin:5px 0; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<span>Hello</span>
<p class="selected">Hello Again</p>
<div class="selected">And Again</div>
<p>And One Last Time</p>
</div>
<script>$("div").children(".selected").css("color", "blue");</script>
</body>
</html>
heb het al uitgevogeld. tussen de haakjes () kun je een class of id meegeven. dus met andere woorden
Quote:
Deze werkt wel(als er geen extra div's in staan):
maakt niks uit als je de .children() specifiek aangeeft wat hij moet nakijken
Hartstikke bedankt voor je hulp!
Alleen zal je zien dat dit ook wat problemen geeft, hij pakt namelijk de waarde van de vorige keer en die worden weer bewerkt door stop waardoor er op gegeven moment niks meer wordt getoond. Dit is simpel terug te zetten doormiddel van het terugzetten van de standaard waarden. Voorbeeldje: http://jsbin.com/irajoc/1/edit