我正在尝试,当默认加载下面的页面以显示 a1 div 时,只需计算该 div 的价格并显示总计,例如216.
当用户单击更改链接/按钮时,它应该隐藏 a1 并显示 a2 div 并计算 a2 的价格,例如201.
有人可以指导我如何实现这一目标吗?一直在尝试,到目前为止还没有成功。
这是我正在工作的代码的快照,代表其逻辑。我希望它能让我更清楚地了解我的情况。
<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>
最佳答案
您需要重构一些东西,首先拥有两个具有相同 ID 的元素不会对您有帮助。我已经使用名为 .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();
});
关于javascript - 切换具有相似 ID 的子元素的父 DIV 以计算其价格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15743194/