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，其中空字符串为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()前导+会将文字转为数字。

如何使用jquery向html元素添加或减去数字

2 个答案: