在JavaScript中动态增加和减少数字

Dynamically increase and decrease numbers in JavaScript

本文关键字：数字 增加 JavaScript 动态      更新时间：2023-09-26

我想知道如何在JavaScript中动态增加和减少数字。用户购买一个商品，我有一个输入字段"数量"，其中有一个数字和两个按钮：一个要添加，另一个要删除。

我的代码是以下

<td class="quantity">
    <a href="#" class="removeItem">-</a>
    <input type="text" id="purchase_quantity" min="1" max="99" delta="0" cost="<?php echo$poupa ?>" name="purchase_quantity" value="1" />
    <a href="#" class="addItem" >+</a>
</td>

如何在单击"-"时减少输入字段的数量，在单击"+"时增加输入字段的数目？

var input = document.getElementById("YOUR_INPUT_ID");
function minus(){
  var num = +input.value;//+ for convert from string to number
  num--;
  input.value = num;
}
function plus(){
  var num = +input.value;//+ for convert from string to number
  num++;
  input.value = num;
}

http://jsfiddle.net/VY9tE/

还有一个例子是你的html表单和支票计数（0..99）：

http://jsfiddle.net/VY9tE/2/

减少：

<a href="#" class="removeItem" onclick="$('#purchase_quantity').val($('#purchase_quantity').val()-1); return false;">-</a>

增加

<a href="#" class="addItem" onclick="$('#purchase_quantity').val($('#purchase_quantity').val()+1); return false;">+</a>

假设您可以使用jquery，因为您已经标记了它。

标记（将文本输入上的ID更改为类）：

<td class="quantity">
    <a href="#" class="removeItem">-</a>
    <input type="text" class="purchase_quantity" min="1" max="99" delta="0" cost="" name="purchase_quantity" value="1" />
    <a href="#" class="addItem">+</a>
</td>

JavaScript（使用jQuery）:

$(function() {
    $('.removeItem').click(function() {
        // Find the appropriate quantity input
        var target = $(this).siblings('.purchase_quantity');
        // Get the current quantity
        var currentQuantity = $(target).val();
        // Not allowed to go below zero
        if (currentQuantity > 0) {
            // Update input with decreased quantity    
            $(target).val(--currentQuantity);
        }
    });
    $('.addItem').click(function() {
        // Find the appropriate quantity input
        var target = $(this).siblings('.purchase_quantity');
        // Get the current quantity
        var currentQuantity = $(target).val();
        // Update input with increased quantity    
        $(target).val(++currentQuantity);
    });
});

看看它在行动中。

相关文章：