Question

我想知道如何在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>

单击“ - ”时如何减少输入字段的数量，并在点击“+”时增加输入字段的数量？

Answer 1

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/

Answer 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，因为你已经标记了它。

Answer 3

标记（将文本输入的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);
    });
});

See it in action

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

3 个答案: