jQuery追加不使用parseInt var

时间:2015-11-05 11:16:10

标签: jquery append parseint

我有一些基本价格和额外价格的产品元素。目标是将额外价格添加到基本价格,并用新计算的价格替换基本价格。

以下是我到目前为止的代码,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>

1 个答案:

答案 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>