jquery vraag
als er op een afbeelding met een kruisje wordt gedrukt var fouten met 1wordt opgehoogd
als erop een afbeelding met een vinkje wordt gedrukt dat var goed met 1 wordt opgehoogd
en vervolgens in een textfield worden gezet?
zo ja, hoe kan ik dit voor elkaar krijgen
lees even een tutorial of bekijk deze video:
http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/
En wat werkt er niet?
Toevoeging op 27/02/2013 21:19:35:
heb nu dit maar doet nog niks:
$(document).ready(function() {
var fouten = 0;
$("#fout").click(function() {
fouten++;
alert(fouten);
$(".Dfout").text("Aantal fout:");
});
});
fouten = fouten + 1;
Resultaat is natuurlijk altijd één.
frank, die tut is zeer oud. De maker daarvan, Jeffrey Way, heeft al een andere nog veel betere tut serie gemaakt: https://tutsplus.com/course/30-days-to-learn-jquery/
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
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
<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var score = 0;
$ ( document ).ready ( function ( ) {
$ ( '#plus' ).click ( function ( ) {
$ ( '#score' ).text ( ++score );
} );
$ ( '#minus' ).click ( function ( ) {
$ ( '#score' ).text ( --score );
} );
} );
</script>
</head>
<body>
<div id="container">
<input id="plus" type="button" value="+" />
<input id="minus" type="button" value="-" />
<div id="score">
0
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var score = 0;
$ ( document ).ready ( function ( ) {
$ ( '#plus' ).click ( function ( ) {
$ ( '#score' ).text ( ++score );
} );
$ ( '#minus' ).click ( function ( ) {
$ ( '#score' ).text ( --score );
} );
} );
</script>
</head>
<body>
<div id="container">
<input id="plus" type="button" value="+" />
<input id="minus" type="button" value="-" />
<div id="score">
0
</div>
</div>
</body>
</html>
Wouter J op 27/02/2013 22:48:38:
Jan, je kan je code nog behoorlijk wat optimaliseren door #score te cachen in een variabele.
Wouter deze opmerking begrijp ik niet.
$ ( document ).ready ( function ( ) { wordt in principe maar één keer uitgevoerd en dan heb je een plus en minus functie die ook slechts één keer aangeroepen worden per muisklik.. (Ik weet niet hoe snel jij achter elkaar kunt klikken met de muis :P )
Wellicht doel je op heel iets anders?
$('#score') wordt telkens opnieuw gezocht in de DOM, bij elke klik op plus of minus.
Dat kan zo gecached worden.
Zo gebeurt het maar 1 keer.
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$ ( document ).ready ( function ( ) {
var scoreObject = $('#score');
$ ( '#plus' ).click ( function ( ) {
scoreObject.text ( ++score );
} );
$ ( '#minus' ).click ( function ( ) {
scoreObject.text ( --score );
} );
} );
var scoreObject = $('#score');
$ ( '#plus' ).click ( function ( ) {
scoreObject.text ( ++score );
} );
$ ( '#minus' ).click ( function ( ) {
scoreObject.text ( --score );
} );
} );
Gewijzigd op 28/02/2013 07:57:47 door Kris Peeters
dit zijn van die kleine dingetjes die ik toch wel fijn vind om te weten.
Ik vraag me nog wel af of het in dit voorbeeld een merkbaar verschil zal geven maar ik weet zeker dat het in complexere situaties (veel) kan uitmaken.
http://nl.wikipedia.org/wiki/Lijst_van_Nederlandse_spreekwoorden_K-O
Quote:
spreekwoord: Wie het kleine niet eert, is het grote niet weerd.
Parodie: Wie het kleine niet leert, doet het grote verkeerd.
uitleg: Je moet waardering hebben voor het geringe.
Parodie: Wie het kleine niet leert, doet het grote verkeerd.
uitleg: Je moet waardering hebben voor het geringe.
Ik denk dat dat het beste antwoord is. Als je good practices niet al lerende gaat toepassen, zal je er niet aan denken wanneer het wel relevant is.
ik moet nu mijn div.load opbouwen met de volgende gegevens:
survey_update.php?username= + username &fouten= + fouten
alleen hoe moet ik dit in js invoeren. want hij geeft direct een code error aan (dreamweaver)
iets als
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$.ajax({
url: 'survey_update.php',
data: {username: username, fouten: fouten},
type: 'post',
success: function(message) {
$('#mijn_div').html(message); // #mijn_div aanpassen naar jouw target
}
})
url: 'survey_update.php',
data: {username: username, fouten: fouten},
type: 'post',
success: function(message) {
$('#mijn_div').html(message); // #mijn_div aanpassen naar jouw target
}
})
en dan op survey_update.php alles met $_POST regelen ipv. $_GET ...
Gewijzigd op 28/02/2013 18:42:31 door Kris Peeters
Verder heb ik ineens iets, waar ik eerder geen last van had:
Als ik nu op de button (goed) of op de button (fout) klik dan refresht hij de pagina en kan ik weer opnieuw beginnen.
hierbij een stukje code qua relevantie:
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
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
survey_compare.php
echo '<table class="table_right" border="1">
<tr>
<td><label class="Gtext24" id="Dhuidig">Huidige vraag: 1</label> <button id="goed">GOED</button> <button id="fout">FOUT</button></td>
<td><label class="Gtext24">Goede antwoorden: </label><input type="text" class="Dgoed" size="1"></td>
<td><label class="Gtext24">Foute antwoorden: </label><input type="text" class="Dfout" size="1"></td>
<td><input type="submit" id="Usubmit" value="Update">
</tr>
</table>';
--------------------------------------------------------------------------------------------------------------
jquery_survey.js
$(document).ready(function(){
var fouten = 0;
var goed = 0;
var maximaal = 21;
var huidig = 1;
$("#fout").click(function() {
fouten++;
maximaal--;
if (maximaal == 0) {
alert("All the answers where checked! click on the button 'submit' to insert the incorrect answers");
} else {
huidig++;
$(".Dfout").val(fouten);
$("#Dhuidig").text("Huidige vraag " + huidig);
};
});
$("#goed").click(function() {
goed++;
maximaal--;
if (maximaal == 0){
alert("All the answers where checked! click on the button 'submit' to insert the incorrect answers");
} else {
huidig++;
$(".Dgoed").val(goed);
$("#Dhuidig").text("Huidige vraag: " + huidig);
};
});
});
echo '<table class="table_right" border="1">
<tr>
<td><label class="Gtext24" id="Dhuidig">Huidige vraag: 1</label> <button id="goed">GOED</button> <button id="fout">FOUT</button></td>
<td><label class="Gtext24">Goede antwoorden: </label><input type="text" class="Dgoed" size="1"></td>
<td><label class="Gtext24">Foute antwoorden: </label><input type="text" class="Dfout" size="1"></td>
<td><input type="submit" id="Usubmit" value="Update">
</tr>
</table>';
--------------------------------------------------------------------------------------------------------------
jquery_survey.js
$(document).ready(function(){
var fouten = 0;
var goed = 0;
var maximaal = 21;
var huidig = 1;
$("#fout").click(function() {
fouten++;
maximaal--;
if (maximaal == 0) {
alert("All the answers where checked! click on the button 'submit' to insert the incorrect answers");
} else {
huidig++;
$(".Dfout").val(fouten);
$("#Dhuidig").text("Huidige vraag " + huidig);
};
});
$("#goed").click(function() {
goed++;
maximaal--;
if (maximaal == 0){
alert("All the answers where checked! click on the button 'submit' to insert the incorrect answers");
} else {
huidig++;
$(".Dgoed").val(goed);
$("#Dhuidig").text("Huidige vraag: " + huidig);
};
});
});
Quote:
geen idee wat je nu bedoelt kris. graag zou ik het in jquery willen zodat ik niet nog meer dingen hoef af te handelen.
- See more at: http://www.phphulp.nl/php/forum/topic/jquery-vraag/89423/1/#642445
- See more at: http://www.phphulp.nl/php/forum/topic/jquery-vraag/89423/1/#642445
Het kan aan mij liggen, maar is alles niet al in jQuery? Misschien is het verstandig om eerst jQuery te leren?
AJAX is Asynchronous JavaScript and XML, waarmee je bestanden kunt inladen met JavaScript.