Jquery .click
Ik zit met een vraagje en hoop dat iemand mij kan helpen.
Ik heb een divje,als je hier op klikt word de class "boxes" doorzichtig.
Maar nu wil ik dat als je op een ander divje klikt, de class "boxes" weer normaal word.
Met een hover kan ik wel maken dat als je over het divje heen gaat de "boxes" doorzichtig worden, en als je er weer af gaat, ze weer normaal worden. Maar met de .click function kom ik er niet uit.
Als ik het klikbaar wil maken verander ik .hover in .click. Dit werkt dus wel, alleen als je op een andere div op de site klikt wil ik dat de class "boxes" weer normaal word, en dit lukt me dus niet.
Ik hoop dat ik duidelijk genoeg ben en iemand mij kan helpen?
Alvast bedankt,
.hover:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
$(function() {
$('#div').hover(function() {
$('.boxes').stop().animate({opacity:'0.05'}, {queue:false, duration:500});
}, function() {
$('.boxes').stop().animate({opacity: '1'}, {queue:false,duration:500});
});
});
[/CODE]
$('#div').hover(function() {
$('.boxes').stop().animate({opacity:'0.05'}, {queue:false, duration:500});
}, function() {
$('.boxes').stop().animate({opacity: '1'}, {queue:false,duration:500});
});
});
[/CODE]
Gewijzigd op 05/03/2011 21:41:27 door Wnd Onbekend
Wat jij wilt is een toggle functie, in jQuery zitten er standaard een paar ingebouwd: toggle(), slideToggle() en fadeToggle().
Zoiets is er niet voor opacity, dus die zal je zelf moeten maken:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
function opacityToggle(var id)
{
if(id.css('opacity') == 1)
{
id.animate({'opacity': 0.05}, {'queue': false, 'duration':500});
}
else
{
id.animate({'opacity': 1}, {'queue': false, 'duration': 500});
}
}
{
if(id.css('opacity') == 1)
{
id.animate({'opacity': 0.05}, {'queue': false, 'duration':500});
}
else
{
id.animate({'opacity': 1}, {'queue': false, 'duration': 500});
}
}
Nu wordt de code:
Code (php)
1
2
3
2
3
$('#box').click(function() {
opacityToggle($('#anotherBox'));
});
opacityToggle($('#anotherBox'));
});
Let wel er op dat je verschil maakt in JavaScript (en andere scripttalen) tussen strings, intergers en booleans:
Code (php)
1
2
3
2
3
var mijnString = 'Tekst tussen quotes';
var mijnInterger = 4; //Cijfer zonder quotes
var mijnBoolean = true; //true of false
var mijnInterger = 4; //Cijfer zonder quotes
var mijnBoolean = true; //true of false
Ik snap het alleen nog niet helemaal.
De opacityToggle die je hebt aangemaakt is puur de functie die je in het stukje JQuery gebruikt, of moet dit nog ergens aan gekoppeld worden?
De id.css en id.animate is voor mij nog niet helemaal duidelijk. Ik had ook al gegoogled maar kwam er niet echt uit.
Ik heb het nu zo:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
function opacityToggle(var id)
{
if(id.css('opacity') == 1)
{
id.animate({'opacity': 0.05}, {'queue': false, 'duration':500});
}
else
{
id.animate({'opacity': 1}, {'queue': false, 'duration': 500});
}
}
$('#button').click(function() {
opacityToggle($('.boxes'));
});
</script>
function opacityToggle(var id)
{
if(id.css('opacity') == 1)
{
id.animate({'opacity': 0.05}, {'queue': false, 'duration':500});
}
else
{
id.animate({'opacity': 1}, {'queue': false, 'duration': 500});
}
}
$('#button').click(function() {
opacityToggle($('.boxes'));
});
</script>
Gewijzigd op 06/03/2011 13:55:14 door Wnd Onbekend
We maken nu een functie aan. Dit is gewoon een zelfgemaakte functie. Die functie noemen we opacityToggle:
Code (php)
1
function opacityToggle()
Nu kunnen we parameters meegeven aan de functie. Omdat we niet weten welke elementen we aanspreken zetten we dat als parameter in de functie. Ik had gezegd var id, maar dit moet alleen maar id zijn. Nu hebben we in deze variabele dus het element die we moeten gaan veranderen. Even een voorbeeld om het beter uit te leggen:
Code (php)
1
$('#box').hide()
We zien hier dat we een element met het id box aanspreken en we gaan deze verbergen. $('#box') is in gewoon JavaScript:
Code (php)
1
document.getElementById('box');
Maar stel nou dat we die id variabel willen maken? Dan kunnen we 2 dingen doen:
Code (php)
1
2
2
var id = '#box';
$(id).hide();
$(id).hide();
Wat hier gebeurd is dat we een naam in de variabele id stoppen en die plaatsen we op de plaats waar je het element aanspreekt. De andere methode (die ik beter vind) is om het zo te doen:
Code (php)
1
2
2
var id = $('#box');
id.hide();
id.hide();
Je ziet dat we nu het gebied $('#box') in een variabele hebben gezet en we die variabele nu gewoon aanroepen en er de functie hide() aan toevoegen. id wordt dus gewoon vervangen door de value van de variabele id.
Met if(id.css('opacity') == 1) roepen we dus eigenlijk de value van de parameter id aan. We kijken of de opacity 1 is, zo ja dan moet hij 0.05 worden. Zo niet, dan moeten we hem 1 maken.
Als we nu deze functie aanroepen moeten we dus gaan werken met $():
Code (php)
1
opacityToggle($('#box'));
Nu vullen we var id van de functie dus met $('#box') dus nu zal de functie i.p.v. id elke keer $('#box') zetten.
Dit is de functie die ik heb aangemaakt om de opacity van een div te veranderen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
function opacityToggle(id)
{
if(id.css('opacity') == 1)
{
id.animate({'opacity': 0.05}, {'queue': false, 'duration':500});
}
else
{
id.animate({'opacity': 1}, {'queue': false, 'duration': 500});
}
}
Ik geef een variabele id om aan te geven om welke div het gaat. Variabele id = $('#box2');
Overal waar dus id staat wordt vervangen door dit.
Code (php)
1
var id = $('#box2');
Dan heb ik de jquery code om aan te geven dat als je op #box1 klikt, de functie die net is aangemaakt (opacityToggle) uit te voeren op #box2. #box2 hoort dus van opacity te veranderen als je op de #box1 klikt.
Code (php)
1
2
3
2
3
$('#box1').click(function() {
opacityToggle($('#box2'));
});
opacityToggle($('#box2'));
});
Volgens mij gaat het nog ergens verkeerd?
Nogmaals alvast bedankt,
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
function opacityToggle(id)
{
if(id.css('opacity') == 1)
{
id.animate({'opacity': .5}, 500);
}
else
{
id.animate({'opacity': 1}, 500);
}
}
{
if(id.css('opacity') == 1)
{
id.animate({'opacity': .5}, 500);
}
else
{
id.animate({'opacity': 1}, 500);
}
}
Mijn code is nu als volgt:
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
<script>
function opacityToggle(id)
{
if(id.css('opacity') == 1)
{
id.animate({'opacity': 0.05}, 500);
}
else
{
id.animate({'opacity': 1}, 500});
}
}
var id = $('#box2');
$('#box1').click(function() {
opacityToggle($('#box2'));
});
</script>
function opacityToggle(id)
{
if(id.css('opacity') == 1)
{
id.animate({'opacity': 0.05}, 500);
}
else
{
id.animate({'opacity': 1}, 500});
}
}
var id = $('#box2');
$('#box1').click(function() {
opacityToggle($('#box2'));
});
</script>
Hij doet alleen nog niet precies wat ik wil. Als je op rood klikt worden de blauwe vlakken doorzichtig. Maar als je dan op roze klikt, blijven de blauwe vlakken doorzichtig.
Het komt er op neer dat als je eenmaal op rood klikt, de blauwe vlakken doorzichtig worden, maar als je dan ergens anders op klikt, maakt niet uit waar op, de blauwe vlakken weer helder moeten worden.
Hier is het voorbeeld met de vlakken: http://www.wndworks.nl/click/
Ik weet niet of dit mogelijk is? Ik wil je in elk geval alvast bedanken voor je hulp!
Hier is alle code bij de voorbeeldsite:
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<html>
<head>
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<style>
html, body {
background: #131313;
margin: 0;
}
#box1 {
height: 50px;
width: 50px;
background: red;
margin: 20px;
}
#box3 {
height: 50px;
width: 50px;
background: pink;
margin: 20px;
}
.box2 {
height: 150px;
width: 150px;
background: blue;
margin: 20px;
float: left;
}
.box4 {
height: 150px;
width: 150px;
background: purple;
margin: 20px;
float: left;
}
</style>
<script type="text/javascript">
function opacityToggle(id)
{
if(id.css('opacity') == 1)
{
id.animate({'opacity': 0.05}, 500);
}
else
{
id.animate({'opacity': 1}, 500);
}
}
var id = $('.box2');
$(function() {
$('#box1').click(function() {
opacityToggle($('.box2'));
});
$('#box3').click(function() {
opacityToggle($('.box4'));
});
});
</script>
</head>
<body>
<div id="box1"></div>
<div id="box3"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box4"></div>
<div class="box4"></div>
</body>
</html>
<head>
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<style>
html, body {
background: #131313;
margin: 0;
}
#box1 {
height: 50px;
width: 50px;
background: red;
margin: 20px;
}
#box3 {
height: 50px;
width: 50px;
background: pink;
margin: 20px;
}
.box2 {
height: 150px;
width: 150px;
background: blue;
margin: 20px;
float: left;
}
.box4 {
height: 150px;
width: 150px;
background: purple;
margin: 20px;
float: left;
}
</style>
<script type="text/javascript">
function opacityToggle(id)
{
if(id.css('opacity') == 1)
{
id.animate({'opacity': 0.05}, 500);
}
else
{
id.animate({'opacity': 1}, 500);
}
}
var id = $('.box2');
$(function() {
$('#box1').click(function() {
opacityToggle($('.box2'));
});
$('#box3').click(function() {
opacityToggle($('.box4'));
});
});
</script>
</head>
<body>
<div id="box1"></div>
<div id="box3"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box4"></div>
<div class="box4"></div>
</body>
</html>
Gewijzigd op 06/03/2011 21:59:24 door Wnd Onbekend
Je kan het best 2 variabele aanmaken: Green en Blue (in mijn voorbeeld werk ik met groen en blauw). Je zet ze allebij op false. Nu geef je als er op de button voor blauw geklikt wordt blue true mee. En als er op groen geklikt wordt geef je green true mee. Met een simpele if statement kan je dan de opacity togglen. Mijn voorbeeldje:
http://waldio.webatu.com/jquery/opacityToggle.html
Zoals je ziet werk ik hier met een plugin style, maar de originele functie staat er ook in (in de comments).
Ik was nog even aan het experimenteren om het helemaal te snappen, door een derde div toe te voegen. Kijken hoe dat dan werkt. Maar het gaat niet zo als ik dacht.
Ik had de onderstaande code geprobeerd, maar waarschijnlijk gaat het mis in de if statement. Of is het helemaal niet mogelijk op de manier zoals ik het probeer?
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
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
var boxblue = false,
boxred = false,
boxgreen = false;
$('#togglered').click(function() {
$('.boxred').opacityToggle();
if(boxblue, boxgreen == true) {
$('.boxblue,.boxgreen').opacityToggle();
}
boxred = true;
boxblue = false;
boxgreen = false;
});
$('#toggleblue').click(function() {
$('.boxblue').opacityToggle();
if(boxred, boxgreen == true) {
$('.boxred,.boxgreen').opacityToggle();
}
boxblue = true;
boxred = false;
boxgreen = false;
});
$('#togglegreen').click(function() {
$('.boxgreen').opacityToggle();
if(boxred, boxblue == true) {
$('.boxred,.boxblue').opacityToggle();
}
boxgreen = true;
boxred = false;
boxblue = false;
});
boxred = false,
boxgreen = false;
$('#togglered').click(function() {
$('.boxred').opacityToggle();
if(boxblue, boxgreen == true) {
$('.boxblue,.boxgreen').opacityToggle();
}
boxred = true;
boxblue = false;
boxgreen = false;
});
$('#toggleblue').click(function() {
$('.boxblue').opacityToggle();
if(boxred, boxgreen == true) {
$('.boxred,.boxgreen').opacityToggle();
}
boxblue = true;
boxred = false;
boxgreen = false;
});
$('#togglegreen').click(function() {
$('.boxgreen').opacityToggle();
if(boxred, boxblue == true) {
$('.boxred,.boxblue').opacityToggle();
}
boxgreen = true;
boxred = false;
boxblue = false;
});
Code (php)
1
if(boxblue === true && boxgreen === true)
Er zit alleen ergens een fout in want als je doorklikt worden ze allemaal weer 100% helder.
Enig idee?
Dit is de laatste vraag die ik je ga stellen. Ik ben je heel dankbaar voor je hulp!
Klikkkkk