Jquery 在添加两个值时获取NaN

我尝试使用jquery将两个值相加，以便将它们输出到我的总价中。我在控制台中遇到的错误是

NaN

，没有其他错误。 我希望得到的是

#totalPrice

和

#delivery price

的值，并将它们相加，输出到

#complete price

中。虽然我确实认为错误可能是因为那里的

R

。网站上必须显示

R100

这是我的密码

<tr>
  <th colspan="4">
    <div class="float-right">
        Sub Total       
    </div>
  </th>
  <td id="totalPrice">R{{ $totalPrice }}</td>
</tr>

<tr class="delivery-fees">
  <th colspan="4">
    <div class="float-right">
        Delivery Fee
    </div>
  </th>
  <td id="delivery-price">R{{ $delivery }}</td>
</tr>

<tr class="total-price">
  <td colspan="4">
    <div class="float-right">
        Total:      
    </div>
  </td>
  <td id="complete-price">R{{ $total }}</td>
</tr>

---

请按以下方式重写您的代码&必须从

R{{{$totalPrice}}

中删除

R

您可以这样做：

<td>R<span id="totalPrice">{{ $totalPrice }}</span></td>
<td>R<span id="delivery-price">{{ $delivery }}</span></td>

---

如果使用

var-price=$（“#totalPrice”）

它不是整型/字符串值，它将类似于元素

请按如下方式重写代码&必须从

R{{{$totalPrice}}

中删除

R

您可以这样做：

<td>R<span id="totalPrice">{{ $totalPrice }}</span></td>
<td>R<span id="delivery-price">{{ $delivery }}</span></td>

如果使用

var-price=$（“#totalPrice”）它不是整数/字符串值，它将类似于元素
您有一些问题：

price
是一个jQuery对象，而不是可以解析的整数。为了解析它，首先需要从两个元素中获取文本（即价格）：

var price = $("#totalPrice").text()
var deliveryprice = $("#delivery-price").text();


检索文本（即价格）后，需要从字符串中删除前缀
R
：

price = price.slice(1);
deliveryprice = deliveryprice.split(1);


虽然它可能不是必需的，但是如果您的
price
/
deliveryprice
可以是一个浮点数（有小数），您应该使用
parseFloat（）
而不是
parseInt（）

因此，修改后的代码应该如下所示：

if($(this).attr("value")=="delivery"){
  $(".delivery-fees").show('slow');

  // get the prices as strings from your elements
  var price = $("#totalPrice").text();
  var deliveryprice = $("#delivery-price").text();

  // remove the "R" prefix so that can be casted to numbers
  price = price.split(1); // remove first character "R" from string
  deliveryprice = deliveryprice.split(1); // remove first character "R" from string

  // Calculate the total price
  var totalPrice = parseFloat(price) + parseFloat(deliveryprice);

  console.log(totalPrice); // log the output
}

您有几个问题：

price
是一个jQuery对象，而不是可以解析的整数。为了解析它，首先需要从两个元素中获取文本（即价格）：

var price = $("#totalPrice").text()
var deliveryprice = $("#delivery-price").text();


检索文本（即价格）后，需要从字符串中删除前缀
R
：

price = price.slice(1);
deliveryprice = deliveryprice.split(1);


虽然它可能不是必需的，但是如果您的
price
/
deliveryprice
可以是一个浮点数（有小数），您应该使用
parseFloat（）
而不是
parseInt（）

因此，修改后的代码应该如下所示：

if($(this).attr("value")=="delivery"){
  $(".delivery-fees").show('slow');

  // get the prices as strings from your elements
  var price = $("#totalPrice").text();
  var deliveryprice = $("#delivery-price").text();

  // remove the "R" prefix so that can be casted to numbers
  price = price.split(1); // remove first character "R" from string
  deliveryprice = deliveryprice.split(1); // remove first character "R" from string

  // Calculate the total price
  var totalPrice = parseFloat(price) + parseFloat(deliveryprice);

  console.log(totalPrice); // log the output
}

要解决您的问题，您应该在代码中添加一个span，如

 <td>R<span id="totalPrice">{{ $totalPrice }}</span></td>

要解决您的问题，您应该在代码中添加一个span，如

 <td>R<span id="totalPrice">{{ $totalPrice }}</span></td>

您可以使用函数读取带有单独结束标记的任何元素的内容。split函数删除前导R

var price = $("#totalPrice").html().split("R")[1];
var deliveryprice = $("#delivery-price").html().split("R")[1];
var totalPrice = parseInt(price) + parseInt(deliveryprice);

您可以使用函数读取带有单独结束标记的任何元素的内容。split函数删除前导R

var price = $("#totalPrice").html().split("R")[1];
var deliveryprice = $("#delivery-price").html().split("R")[1];
var totalPrice = parseInt(price) + parseInt(deliveryprice);

td中也有货币，因此无法获得该值。我建议您添加一个带有价格的html数据属性，并将其用于计算。更改html如下：

<tr>
  <th colspan="4">
    <div class="float-right">
        Sub Total       
    </div>
  </th>
  <td id="totalPrice" data-price="{{ $totalPrice }}">R{{ $totalPrice }}</td>
</tr>

<tr class="delivery-fees">
  <th colspan="4">
    <div class="float-right">
        Delivery Fee
    </div>
  </th>
  <td id="delivery-price" data-price="{{ $delivery }}">R{{ $delivery }}</td>
</tr>

    if($(this).attr("value")=="delivery"){
        $(".delivery-fees").show('slow');

        var price = $("#totalPrice").data('price'); //get data-price by this syntax
        var deliveryprice = $("#delivery-price").data('price');  //get data-price by this syntax
        var totalPrice = parseInt(price) + parseInt(deliveryprice);

        console.log(totalPrice);
    }

希望它对您有所帮助。
您在td中也有货币，因此无法获得该值。我建议您添加一个带有价格的html数据属性，并将其用于计算。更改html如下：

<tr>
  <th colspan="4">
    <div class="float-right">
        Sub Total       
    </div>
  </th>
  <td id="totalPrice" data-price="{{ $totalPrice }}">R{{ $totalPrice }}</td>
</tr>

<tr class="delivery-fees">
  <th colspan="4">
    <div class="float-right">
        Delivery Fee
    </div>
  </th>
  <td id="delivery-price" data-price="{{ $delivery }}">R{{ $delivery }}</td>
</tr>

    if($(this).attr("value")=="delivery"){
        $(".delivery-fees").show('slow');

        var price = $("#totalPrice").data('price'); //get data-price by this syntax
        var deliveryprice = $("#delivery-price").data('price');  //get data-price by this syntax
        var totalPrice = parseInt(price) + parseInt(deliveryprice);

        console.log(totalPrice);
    }

希望它对您有所帮助。
您需要从
td
元素中检索
text（）
，然后在对值执行任何数字操作之前删除
R
。我还建议对货币使用
parseFloat（）
您需要从
td
元素中检索
text（）
，然后在对值执行任何数字操作之前删除
R
。我还建议在上使用
parseFloat（）currencies@RoryMcCrossan：很抱歉，我没有注意到这是一个表td id。现在，我有modified@RoryMcCrossan：很抱歉，我没有注意到这是一个表td id。现在，我已经修改了