Question

我正在尝试使用jquery将2个值加在一起，以便我可以将它们输出到我的总价中。我在控制台中收到的错误是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>

这是我的jQuery

$(document).ready(function()
{
    $('input[type="radio"]').click(function()
    {
        if($(this).attr("value")=="collection"){
            $(".delivery-fees").hide('slow');
        }

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

            var price = $("#totalPrice");
            var deliveryprice = $("#delivery-price");
            var totalPrice = parseInt(price) + parseInt(deliveryprice);

            console.log(totalPrice);
        }
    });
});

Answer 1

请按以下方式重写您的代码，并且必须从R删除<td id="totalPrice">R{{ $totalPrice }}</td>

您可以按照以下方式进行操作：

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

.text()丢失

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

var totalPrice = parseInt(price) + parseInt(deliveryprice);
console.log(totalPrice);

如果您使用var price = $("#totalPrice");而不是整数/字符串值，它将类似于元素

Answer 2

您遇到了一些问题：

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
}

Answer 3

您在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>

现在您可以在jQuery中获取这些值并按如下所示使用它：

    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);
    }

希望它对您有帮助。

Answer 4

要解决您的问题，您应该在代码中添加跨度，例如

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

因此，当您获取值时，将获得不带R字符串的值，那么您可以做到

var price = $("#totalPrice").html();
var deliveryprice = $("#delivery-price").html();
var totalPrice = parseInt(price) + parseInt(deliveryprice);

Answer 5

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

DCM

将两个值相加时获得NaN

5 个答案: