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
2
3
$('.item').mouseenter(function(){
$('.item > div').show();
});
$('.item > div').show();
});
Eens je binnen die functie komt, heb je (altijd bij deze event handlers) de variabele this.
this is dan altijd het element dat aangesproken is. In jouw geval dus slechts het ene item (en niet de andere).
Die this kan je dan verder gebruiken om te zoeken in zijn child elements. Met .find(selector)
Uitgewerkt voorbeeld
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Verder zoeken naar child elements met .find()</title>
<style>
.item {
width: 200px;
height: 150px;
margin: 10px;
background-color: #cccccc;
}
.item .close {
float: right;
clear: both;
}
</style>
</head>
<body>
<div class="item">
<div class="close" hidden>
<p>X</p>
</div>
Hello 1
</div>
<div class="item">
<div class="close" hidden>
<p>X</p>
</div>
Hello 2
</div>
<div class="item">
<div class="close" hidden>
<p>X</p>
</div>
Hello 3
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function($) { // wordt uitgevoerd als de pagina geladen is
$('.item').mouseenter(function(e) {
// this is hier enkel de <div class="item"></div> waar de muis van de gebruiker over is gegaan.
// verder zoeken naar de children van een item, kan met .find()
var closeButton = $(this).find('div.close');
closeButton.show();
});
$('.item').mouseleave(function(e) {
$('.item > div').hide();
});
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Verder zoeken naar child elements met .find()</title>
<style>
.item {
width: 200px;
height: 150px;
margin: 10px;
background-color: #cccccc;
}
.item .close {
float: right;
clear: both;
}
</style>
</head>
<body>
<div class="item">
<div class="close" hidden>
<p>X</p>
</div>
Hello 1
</div>
<div class="item">
<div class="close" hidden>
<p>X</p>
</div>
Hello 2
</div>
<div class="item">
<div class="close" hidden>
<p>X</p>
</div>
Hello 3
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function($) { // wordt uitgevoerd als de pagina geladen is
$('.item').mouseenter(function(e) {
// this is hier enkel de <div class="item"></div> waar de muis van de gebruiker over is gegaan.
// verder zoeken naar de children van een item, kan met .find()
var closeButton = $(this).find('div.close');
closeButton.show();
});
$('.item').mouseleave(function(e) {
$('.item > div').hide();
});
});
</script>
</body>
</html>
