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-文本编号将更改为60）。 / p>

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() );
});

根据评论进行修改

// 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>

JS by jquery：

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();
    });
});

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

Javascript增加一个值

4 个答案: