[英]Calculate data attributes and output into HTML
我想计算所有<select>
数据属性,然后将总数输出到<span>
。
以下是选择:
<select name="product-1" id="product-1">
<option value="0" data-price="0">0 (0.00$)</option>
<option value="10" data-price="52.39">10 (52.39$)</option>
<option value="20" data-price="61.93">20 (61.93$)</option>
</select>
<select name="product-2" id="product-2">
<option value="0" data-price="0">0 (0.00$)</option>
<option value="10" data-price="57.92">10 (57.92$)</option>
<option value="20" data-price="77.81">20 (77.81$)</option>
</select>
<select name="product-3" id="product-3">
<option value="0" data-price="0">0 (0.00$)</option>
<option value="10" data-price="64.63">10 (64.63$)</option>
<option value="20" data-price="84.07">20 (84.07$)</option>
</select>
这是跨度:
<span id="total">4.99</span>
这是jQuery:
$(document).ready(function() {
delivery = 4.99, $("select").change(function() {
total = $(this).find("option:selected").data("price") + delivery, $("#total").html(total.toFixed(2))
})
});
问题:我不知道如何将所有<select>
属性求和成一个总数。 在我当前的代码中,它仅输出最后更改的选项。
最简单的方法是在更改值时循环浏览每个select
的所选选项,并保持所选价格的连续总和。 尝试这个:
$(document).ready(function() { var delivery = 4.99; $("select").change(function() { var total = delivery; $('select option:selected').each(function() { total += parseFloat($(this).data('price')); }); $("#total").html(total.toFixed(2)) }) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="product-1" id="product-1"> <option value="0" data-price="0">0 (0.00$)</option> <option value="10" data-price="52.39">10 (52.39$)</option> <option value="20" data-price="61.93">20 (61.93$)</option> </select> <select name="product-2" id="product-2"> <option value="0" data-price="0">0 (0.00$)</option> <option value="10" data-price="57.92">10 (57.92$)</option> <option value="20" data-price="77.81">20 (77.81$)</option> </select> <select name="product-3" id="product-3"> <option value="0" data-price="0">0 (0.00$)</option> <option value="10" data-price="64.63">10 (64.63$)</option> <option value="20" data-price="84.07">20 (84.07$)</option> </select> <span id="total">4.99</span>
每当更改任何选择时,此事件均会触发,但这只会给您刚更改的选择的价格。 由于您将始终希望总共尝试使用这3种方法,
$(document).ready(function() {
delivery = 4.99, $("select").change(function() {
total = delivery;
$("select.product").each(function(){
total+=$(this).find("option:selected").data("price");
});
$("#total").html(total.toFixed(2))
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.