javascript - Toggle parent DIV's with child elements of similar ID to calculate their price -
i trying that, when below page loaded default show a1 div , calculate price div , display in total e.g. 216.
and when user click on change link/button, should hide a1 , display a2 div , calculate price a2 e.g. 201.
could guide me how can achieved? have been trying, far no luck.
this snapshot of code working, representing logic. hope gives clearer picture of situation.
<script type="text/javascript"> function prc_calc() { $price = parseint($('#price').attr('value')); $quantity = parseint($('#quantity').attr('value')); $sum = $price * $quantity; $('#total').text($sum); } function change() { prc_calc(); } $(document).ready(function() { prc_calc(); } </script> <body> <div id="a1" style="display:block"> <span id="price">54</span> <span id="quantity">4</span> </div> <div id="a2" style="display:none"> <span id="price">67</span> <span id="quantity">3</span> </div> <span id="total"></span> <a href="javascript:void(0);" onclick="change();">change</a> </body>
you need restructure few things, firstly having 2 elements same id not going you. have restructured using class called .selected :
css:
.selected { display:block !important; } html:
<body> <div id="a1" style="display:none" class="selected"> <span class="price">54</span> <span class="quantity">4</span> </div> <div id="a2" style="display:none"> <span class="price">67</span> <span class="quantity">3</span> </div> <span id="total"></span> <a id="changeclick">change</a> </body> javascript:
function prc_calc() { var price = $('.selected .price').text(); var quantity = $('.selected .quantity').text(); var sum = price * quantity; $('#total').text(sum); } function changeprice() { } $(document).ready(function() { prc_calc(); }); $('#changeclick').click(function() { $('#a1').toggleclass('selected'); $('#a2').toggleclass('selected'); prc_calc(); });
Comments
Post a Comment