如何将两个内容的HTML加到jQuery脚本中

时间:2018-10-25 08:16:08

标签: javascript jquery

我有两个内容:

<div class="card text-center">
  <div class="card-header">
    <h5 >Prime</h5>
  </div>
  <div class="card-body">
    <h2 id="Prime_id" class="card-title"></h2>
  </div>
</div>

<div class="card text-center">
  <div class="card-header">
    <h5 >Benif</h5>
  </div>
  <div class="card-body">
    <h2 id="benif_id" class="card-title"></h2>
  </div>
</div>

<div class="card text-center">
  <div class="card-header">
    <h5 >total</h5>
  </div>
  <div class="card-body">
    <h2 id="total_id" class="card-title"></h2>
  </div>
</div>

每个内容都有以下示例值:

<script>
  console.log($("#benif_id").html()); //11.578.351 $
  console.log($("#Prime_id").html()); //5.877.210 $
</script>

我想做$("#Total_id") = $("#benif_id") + $("#Prime_id"),但是不行。

我就是这样:

<script>
  $("#total_id").text(parseFloat($("#benif_id").html()) + parseFloat($("#Prime_id").html()) + '$');
</script>

代替

$("#total_id") = 17,455,561 $

4 个答案:

答案 0 :(得分:2)

您必须使用.text()来获取和设置各个元素的值。您还必须先将这些值转换为Number(),然后再添加它们。您还必须用空字符串replace() $,以使其不再保留在文本中。

var benif = $("#benif_id").text().replace('$', '');
var prime = $("#Prime_id").text().replace('$', '');
$("#Total_id").text(Number(benif)  + Number(prime) + ' $');

答案 1 :(得分:1)

尝试一下:

$("#total_id").text((
parseFloat($("#benif_id").html().split('.').join("")) + 
parseFloat($("#Prime_id").html().split('.').join(""))) + '$')

解析数字时删除点

答案 2 :(得分:1)

也许您在寻找什么:

var benif = $("#benif_id").text().replace(/[.\s$]/g, '');
var prime = $("#Prime_id").text().replace(/[.\s$]/g, '');

$("#Total_id").text((+benif + +prime) + ' $');

答案 3 :(得分:0)

尝试

$("#benif_id").html('11.578.351 $'); //11.578.351 $
 $("#Prime_id").html('5.877.210 $'); //5.877.210 $
  var Benif=$("#benif_id").html().replace(/\./g,'').replace('$','');
  var Prime=$("#Prime_id").html().replace(/\./g,'').replace('$','');
  var total=+Benif + + Prime;
 //alert(total.toLocaleString())
  $("#total_id").text(total.toLocaleString() + ' $');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="card text-center">
  <div class="card-header">
    <h5 >Prime</h5>
  </div>
  <div class="card-body">
    <h2 id="Prime_id" class="card-title"></h2>
  </div>
</div>

<div class="card text-center">
  <div class="card-header">
    <h5 >Benif</h5>
  </div>
  <div class="card-body">
    <h2 id="benif_id" class="card-title"></h2>
  </div>
</div>

<div class="card text-center">
  <div class="card-header">
    <h5 >total</h5>
  </div>
  <div class="card-body">
    <h2 id="total_id" class="card-title"></h2>
  </div>
</div>