Javascript增加一个值

Question

我已经尝试过但失败了，所以有时间请教专家。

我有以下 HTML：

<input type="button" value="-" class="minus">
<input type="number" value="20" class="input-text">
<input type="button" value="+" class="plus">

<div class="newprice">
    20
</div>

使用 javascript（jQuery 特定的很好）我需要能够拥有它，以便当有人单击加号按钮时，.newprice div 内的数字增加 20。同样，当他们点击减号按钮时，数字得到减少了 20。

如果他们使用 .input-text 字段上的小向上/向下箭头，也是如此。

或者如果他们输入一个值而不是使用任何按钮，那么 .input-text div 中的数字会相应地改变（如果有人输入 3，.input-text 数字将变为 60）。

PS：如果更简单，.newprice div 可以改为文本字段。什么都行。

[为了将这一切放在上下文中，基本上它是购物车的一部分，但我试图向用户展示当他们输入数量时他们将为产品支付多少费用。例如，该产品售价 20 美元，如果他们想要其中 3 个，他们将能够立即（在添加到购物车之前）看到这将花费他们 60 美元。]

我希望我解释得当。

提前致谢。

Answer 1

你可以这样做。

// how many to increment each button click
var increment = 20;

$('.plus, .minus').on('click', function() {
    // the current total
    var total = parseInt($('#newprice').text());

    // increment the total based on the class
    total += (this.className == 'plus' ? 1 : -1) * increment;

    // update the div's total
    $('#newprice').text(total);
    // update the input's total
    $('.input-text').val(total);
});

$('.input-text').on('change', function() {
    // update the div's total
    $('#newprice').text( $(this).val() );
});

基于 cmets 编辑

// how many to increment each button click
var increment = 20;

$('.plus, .minus').on('click', function() {
    // the current total
    var total = parseInt($('#newprice').text());

    // increment the total based on the class
    total += (this.className == 'plus' ? 1 : -1) * increment;

    // update the div's total
    $('#newprice').text(total);
});

$('.input-text').on('change', function() {
    // update the div's total
    $('#newprice').text( $(this).val() );
});

要将输入的数字增加 20，请像这样添加属性step。该属性中的数字表示每次按下向上和向下按钮时值将增加多少。

<input type="number" value="20" step="20" class="input-text">

Answer 2

你可以...

var $counter = $('.counter');

$('button').on('click', function(){
  var $button = $(this);
  $counter.text(function(i,val){
    return +val + ( $button.hasClass('up') ? 1 : - 1 );
  });
});

使用这个 HTML...

<div class="counter">10</div>
<button class="down">-</button>
<button class="up">+</button>

作为记录，您应该绝对使用计数器元素的输入。

Answer 3

这是您的纯 JS 示例，但我相信要捕获 IE9 以下的任何内容，您还必须附加事件侦听器。

jsFiddle

<form>
   <input type="button" id="value-change-dec" value="-">
   <input type="text" id="new-price" value="0" disabled>
   <input type="button" id="value-change-inc" value="+">
   <br>
   <input type="number" id="change-price">
</form>

document.getElementById("value-change-dec").addEventListener("click", function() {
    var value = parseInt(document.getElementById('new-price').value);
    value=value-20;
    document.getElementById('new-price').value = value;
});

document.getElementById("value-change-inc").addEventListener("click", function() {
    var value = parseInt(document.getElementById('new-price').value);
    value=value+20;
    document.getElementById('new-price').value = value;
});

function changeIt() {
    document.getElementById('new-price').value = document.getElementById('change-price').value*20;
}

var changer = document.getElementById('change-price');
changer.addEventListener('keydown', changeIt, false);
changer.addEventListener('keyup', changeIt, false);
changer.addEventListener('click', changeIt, false);

Answer 4

我已经添加了一些计算和 html 来处理基本价格。见demo in jsfiddle

HTML：

Price per item:<input name="basicPrice" value="20" class="input-text">
<br />
<input type="button" value="-" class="minus">
<input name="quantity" id="quantity" type="number" value="1"  class="input-text">
<input type="button" value="+" class="plus">
<br />Money much pay:
<span class="newprice">20</span>

jquery 的 JS ：

function calculate(){
    var basicPrice = parseInt($(":input[name='basicPrice']").val());
    var quantity = parseInt($(":input[name='quantity']").val());
    console.log(quantity);
    var total = basicPrice * quantity;
    $(".newprice").text(total);
}
function changeQuantity(num){
    $(":input[name='quantity']").val( parseInt($(":input[name='quantity']").val())+num);
}
$().ready(function(){
    calculate();
    $(".minus").click(function(){
        changeQuantity(-1);
        calculate();
    });
    $(".plus").click(function(){
        changeQuantity(1);
        calculate();
    });
    $(":input[name='quantity']").keyup(function(e){
        if (e.keyCode == 38) changeQuantity(1);
        if (e.keyCode == 40) changeQuantity(-1);
        calculate();
    });
      $(":input[name='basicPrice']").keyup(function(e){
        calculate();
    });
    var quantity = document.getElementById("quantity");
    quantity.addEventListener("input", function(e) {
        calculate();
    });
});

如果您需要任何支持，请告诉我。