Как добавить или вычесть число в элемент html с помощью jquery

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() ведущего + повернет текст на номер.