Question

基本上我正在尝试增加和减少按钮。当文本值达到24时，它应该停止增加。这是HTML代码：

<input type='button' value='-' class='qtyminus' field='quantity' />
<input type='text' name='quantity' value='0' class='qty' />
<input type='button' value='+' class='qtyplus' field='quantity' />

我的CSS：

.qty {
    width: 40px;
    height: 25px;
    text-align: center;
}
input.qtyplus {
    width:25px;
    height:25px;
}
input.qtyminus {
    width:25px;
    height:25px;
}

我的JavaScript：

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

这是我的fiddle。我通过研究得到了这个小提琴。我想知道是否有任何方法可以像上面的加号按钮一样设置样式，然后是文本框，然后是减号按钮。

另外，有没有办法通过JavaScript设置加号和减号限制？因为我确实设置了一个if ekse语句，但它不起作用。

Answer 1

将此代码放入if (!isNaN(currentVal) && currentVal > 0)

中

if(currentVal === 24){ return; }

编辑：这样，如果你输入框的当前值是24，它将退出该函数。

Answer 2

在您最初粘贴的代码中，“else if”部分未到达，因为“if（！isNaN ...”部分已经是真的。正如VoronoiPotato在评论中建议的那样，您需要将比较移到别处。例如：

    if (!isNaN(currentVal) ) {
        if (currentVal < 24) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        }
    } else {
        // Otherwise put a 0 there
        $('input[name='+fieldName+']').val(0);
    }

Answer 3

我刚编辑了你的jsFiddle ..

http://jsfiddle.net/puJ6G/847/

这是在你的陈述中..但我只是想知道你是否要将最后一个号码停在24，或者如果号码到达24，它将转为0。

在此处的代码中，它将停在24

中

if (currentVal == 24) {
            $('input[name='+fieldName+']').val(currentVal);
        }
        else if (!isNaN(currentVal) ) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } 
        else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }

但是你想将24改回0使用它。

if (!isNaN(currentVal) && && currentVal<24 ) {
      // Increment
$('input[name='+fieldName+']').val(currentVal + 1);
} 
else {
// Otherwise put a 0 there
$('input[name='+fieldName+']').val(0);
}

我希望它能帮到你..

JavaScript增量和减量按钮

3 个答案: