如何使用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

对于跨度，您需要使用text()方法来获取内容不val()。在这两种情况下，val()返回一个空字符串。在第一种情况下，只会发生字符串连接。在第二种情况下这将是"" - 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()领先+会变成文本数量。