带有+/-按钮的限制值框

Quantity Box with +/- button having a limit

本文关键字：按钮 带有      更新时间：2023-09-26
        jQuery(document).ready(function () {
        // This button will increment the value
        $('.qtyplus').click(function (e) {
            // Stop acting like a button
            e.preventDefault();
            // Get the field name
            fieldName = $(this).attr('field');
            // Get its current value
            var currentVal = parseInt($('input[name=' + fieldName + ']').val());
            // If is not undefined
            if (!isNaN(currentVal)) {
                // Increment
                $('input[name=' + fieldName + ']').val(currentVal + 1);
            }
            else  {
                // Otherwise put a 0 there
                $('input[name=' + fieldName + ']').val(0);
            }
        });
        // This button will decrement the value till 0
        $(".qtyminus").click(function (e) {
            // Stop acting like a button
            e.preventDefault();
            // Get the field name
            fieldName = $(this).attr('field');
            // Get its current value
            var currentVal = parseInt($('input[name=' + fieldName + ']').val());
            // If it isn't undefined or its greater than 0
            if (!isNaN(currentVal) && currentVal >= 0) {
                // Decrement one
                $('input[name=' + fieldName + ']').val(currentVal - 1);
            } else {
                // Otherwise put a 0 there
                $('input[name=' + fieldName + ']').val(0);
            }
        });
    });

如何在此框上设置限制?我不希望数量超过100，所以如果用户一直按+键，当数量达到100时，数量应该停止增加。

if(currentVal == 100)
{
  $('input[name=' + fieldName + ']').val(currentVal);
}

我认为那是不对的，我需要一些帮助

编辑:http://jsfiddle.net/laelitenetwork/puJ6G/字体在这里

我创建了一个简单的逻辑，可能会对您有所帮助。由于您没有提供任何HTML，所以我制作了一个简单的结构(可能与您的结构不同):

<input type="text" name="field1" value="0" />
<button class="qty" type="button" data-func="plus" data-field="field1">+1</button>
<button class="qty" type="button" data-func="minus" data-field="field1">-1</button>

注意:

  1. 自定义HTML属性使用data-前缀，如data-field和data-func。
  2. 我给了两个按钮一个常见的qty类-我们可以辨别哪个按钮被点击后。这简化了选择器，也防止了多余的代码块(每个按钮一个，这很容易膨胀)。
下面是jQuery的逻辑: 
$('.qty').click(function() {
    var $t = $(this),
        $in = $('input[name="'+$t.data('field')+'"]'),
        val = parseInt($in.val()),
        valMax = 100,
        valMin = 0;
    // Check if a number is in the field first
    if(isNaN(val) || val < valMin) {
        // If field value is NOT a number, or
        // if field value is less than minimum,
        // ...set value to 0 and exit function
        $in.val(valMin);
        return false;
    } else if (val > valMax) {
        // If field value exceeds maximum,
        // ...set value to max
        $in.val(valMax);
        return false;
    }
    // Perform increment or decrement logic
    if($t.data('func') == 'plus') {
        if(val < valMax) $in.val(val + 1);
    } else {
        if(val > valMin) $in.val(val - 1);
    }
});

很简单，是吗?您甚至可以通过在达到阈值时禁用<button>元素来增强我的示例，但由于您没有提到它，我猜这更像是一个噱头，而不是必要的。

请参阅此处:http://jsfiddle.net/teddyrised/2aC5C/3/

在您的增量逻辑中:

if (!isNaN(currentVal) && currentVal <= 100) {

我想应该可以。

相关文章：