我有一些基本价格和额外价格的产品元素。目标是将额外价格添加到基本价格,并用新计算的价格替换基本价格。
以下是我到目前为止的代码,console.logs给了我所有正确的反馈,但无论我尝试什么,价格都不会附加到.subtotal div。
jQuery(document).ready(function() {
var extra = jQuery('.extra');
extra.each(function() {
var $this = jQuery(this).html().replace(/[^\d,]/g, '');
var subtotal_dest = jQuery(this).siblings('.subtotal');
jQuery(subtotal_dest).css('border', '2px solid green');
var subtotal = jQuery(this).siblings('.subtotal').html().replace(/[^\d,]/g, '');
var newtotal = parseInt($this) + parseInt(subtotal);
var rendered_total = '€ ' + newtotal;
jQuery(rendered_total).appendTo(subtotal_dest);
console.log($this);
console.log(subtotal);
console.log(rendered_total);
console.log('-');
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
</head>
<body>
<div class="product" style="margin-bottom:20px;">
<!--subtotal should be €10 -->
<div class="subtotal">€ 5,00</div>
<div class="extra">€ 5,00</div>
</div>
<div class="product" style="margin-bottom:20px;">
<!--subtotal should be €20-->
<div class="subtotal">€ 15,00</div>
<div class="extra">€ 5,00</div>
</div>
<div class="product" style="margin-bottom:20px;">
<!--subtotal should be €30-->
<div class="subtotal">€ 25,00</div>
<div class="extra">€ 5,00</div>
</div>
</body>
</html>
答案 0 :(得分:1)
$('€ ' + newtotal')
没有任何用处。
替换
jQuery(rendered_total)
与
jQuery("<div>").text(rendered_total).
完整的可运行代码:
jQuery(document).ready(function() {
var extra = jQuery('.extra');
extra.each(function() {
var $this = jQuery(this).html().replace(/[^\d,]/g, '');
var subtotal_dest = jQuery(this).siblings('.subtotal');
jQuery(subtotal_dest).css('border', '2px solid green');
var subtotal = jQuery(this).siblings('.subtotal').html().replace(/[^\d,]/g, '');
var newtotal = parseInt($this) + parseInt(subtotal);
var rendered_total = '€ ' + newtotal;
jQuery("<div>").text(rendered_total).appendTo(subtotal_dest);
console.log($this);
console.log(subtotal);
console.log(rendered_total);
console.log('-');
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
</head>
<body>
<div class="product" style="margin-bottom:20px;">
<!--subtotal should be €10 -->
<div class="subtotal">€ 5,00</div>
<div class="extra">€ 5,00</div>
</div>
<div class="product" style="margin-bottom:20px;">
<!--subtotal should be €20-->
<div class="subtotal">€ 15,00</div>
<div class="extra">€ 5,00</div>
</div>
<div class="product" style="margin-bottom:20px;">
<!--subtotal should be €30-->
<div class="subtotal">€ 25,00</div>
<div class="extra">€ 5,00</div>
</div>
</body>
</html>