如何使用jQuery向HTML元素添加或减去数字

Question

我正在尝试从span标签内的数字添加/减去。 这取决于复选框。 这是我正在尝试的jQuery：

//If checked
var $newprice = $("#totalprice").val() + 299;               
$("#totalprice").text($newprice);

//If NOT checked
var $newprice = $("#totalprice").val() - 299;               
$("#totalprice").text($newprice);

如果我选中此框，它将添加299，但未选中则会将数字更改为-299。

Answer 1

对于span，您需要使用text()方法来获取内容，而不是val() 。 在这两种情况下， val()返回一个空字符串。 在第一种情况下，只会发生字符串连接。 在第二种情况下，它将是"" - 231 -231 ，结果是-231 ，其中空字符串充当0。

因此，您可以将text()与包含索引和旧值的回调一起使用，解析旧值并添加或减去值，然后将其返回以进行更新。

//If checked
var $newprice = $("#totalprice").text(function(i,v){
    return parseInt(v,10) + 299;               
});
//If NOT checked
var $newprice = $("#totalprice").text(function(i,v){
    return parseInt(v,10) - 299;               
});

Answer 2

您必须在复选框的更改事件中执行此操作：

 $(':checkbox').change(function() { if (this.checked) { //If checked var $newprice = +$("#totalprice").text() + 299; $("#totalprice").text($newprice); } else { //If NOT checked var $newprice = +$("#totalprice").text() - 299; $("#totalprice").text($newprice); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <input type='checkbox'> <span id='totalprice'>0</span> </p> 

+$("#totalprice").text()以+ +$("#totalprice").text()会将文本转换为数字。