jQuery optellen en aftrekken
Voor een school projectje ben ik bezig met een klein programmatje waarbij checkboxes aangeklikt kunnen worden.
Iedere checkbox heeft een waarde, deze staat in het titel attribute van de label die bij de checkbox hoort.
Nu moet er in een aparte div die standaard op 0 staat de waardes van de checkboxes worden opgeteld.
Ik probeerde hiervoor de volgende jQuery te gebruiken:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
$(".pricing_table input[type='checkbox']").change(function () {
if($(this).is(":checked")) {
var thisPrice = $(this).parent().find("label").attr("title");
var priceElement = $(this).parent().parent().parent().find(".price");
var currentPrice = priceElement.find("span").html();
var totalPrice = currentPrice += thisPrice;
priceElement.find("span").html(totalPrice);
} else {
}
});
if($(this).is(":checked")) {
var thisPrice = $(this).parent().find("label").attr("title");
var priceElement = $(this).parent().parent().parent().find(".price");
var currentPrice = priceElement.find("span").html();
var totalPrice = currentPrice += thisPrice;
priceElement.find("span").html(totalPrice);
} else {
}
});
Echter zit dit de waardes telkens achter elkaar en telt hij ze niet op.
Op geen enkele manier heb ik dit zelf kunnen oplossen.
Dus ik begon te googlen en kwam eigenlijk op vrij weinig uit.
Het enige wat ik had gevonden had betrekking op parseInt en parseFloat (wat voor mij volgens mij weinig nut heeft aangezien ik niet met komma getallen werk).
Iemand enig idee hoe ik dit kan oplossen?
Mijn HTML ziet er als volgt uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div class="pricing_table">
<ul>
<li><input type="checkbox" name="test" id="test"> <label for="test" title="5"><span></span>Lorum ipsum dolor sit amet</label></li>
<li><input type="checkbox" name="test2" id="test2"> <label for="test2" title="10"><span></span>Lorum ipsum dolor sit amet</label></li>
<li><input type="checkbox" name="test3" id="test3"> <label for="test3" title="10"><span></span>Lorum ipsum dolor sit amet</label></li>
<li><input type="checkbox" name="test4" id="test4"> <label for="test4" title="15"><span></span>Lorum ipsum dolor sit amet</label></li>
</ul>
<div class="price">Uw prijs: €<span>0</span></div>
</div>
<ul>
<li><input type="checkbox" name="test" id="test"> <label for="test" title="5"><span></span>Lorum ipsum dolor sit amet</label></li>
<li><input type="checkbox" name="test2" id="test2"> <label for="test2" title="10"><span></span>Lorum ipsum dolor sit amet</label></li>
<li><input type="checkbox" name="test3" id="test3"> <label for="test3" title="10"><span></span>Lorum ipsum dolor sit amet</label></li>
<li><input type="checkbox" name="test4" id="test4"> <label for="test4" title="15"><span></span>Lorum ipsum dolor sit amet</label></li>
</ul>
<div class="price">Uw prijs: €<span>0</span></div>
</div>
Als jullie meet informatie hierover voor mij hebben of oplossingen hoor ik dit graag.
Bij voorbaat dank!
En optellen/aftrekken met strings gaat niet.
Je kan je variable omzetten naar een integer door er een '+' voor te zetten.
Dus bijv: var thisPrice = +$(this).parent().find("label").attr("title");
Mocht je er niet uitkomen heb ik hier nog een werkend voorbeeld online gezet:
http://jsfiddle.net/6kNy5/1/
Oke duidelijk, bedankt voor de oplossing.
Wist niet dat het niet mogelijk was om met strings op te tellen, maar nu ik het zo bekijk is het opzich wel logisch.
@ Wouter J
Op wat voor manier kan ik die beter invoeren dan?
Zoals ik in mijn begin post ook zei heb ik hier op gegoogled en kon ik hier alleen dingen over vinden van bijv het samenvoegen van komma getallen etc.
In jouw geval wordt het dan
Code (php)
1
var thisPrice = parseInt( $(this).parent().find("label").attr("title") );
Trouwens nog een tip.
Je gebruikt nu de het title-attribuut om je waardes op te halen.
In HTML5 heb je ook het data-attribuut.
Dan kun je bijvoorbeeld dit doen:
Code (php)
1
2
3
4
5
2
3
4
5
<input type="checkbox" name="test" id="test" data-waarde="10">
<script type="text/javascript">
var waarde = $('#test').data('waarde');
</script>
<script type="text/javascript">
var waarde = $('#test').data('waarde');
</script>
Je kan dan heel makkelijk met jQuery's data() functie waardes ophalen uit zelfgemaakte attributen.
Gewijzigd op 20/03/2013 10:13:16 door Tim S
controleer wel of het ook in IE werkt.
dat was vaak niet zo !