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

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

看到它在行动。