Question

元素的一次点击事件，它只能运行一次。假设值为2，它将仅增加/减少/重置一次。

如何重置事件，以便用户可以继续点击元素，增加值.item-selection-amount

的值

$('.item-selection-amount').click(function(event) {
        var amount = $(this).val();
        switch (event.which) {
            case 1:
                //set new value +
                $(this).val(amount + 1);
                break;
            case 2:
                //set new value reset
                $(this).val(0);
                break;
            case 3:
                //set new value -
                if(amount > 0){ 
                    $(this).val(amount - 1);
                }
                break;
        }
    });

谢谢

Answer 1

JavaScript 巧妙地（读：这是一个坏主意）重载了+运算符，意味着算术加法和字符串连接。

如果其中一个操作数看起来像一个字符串，它将进行字符串连接。你的值看起来像一个字符串，所以就是这样。

我使用parseInt(val, 10)尝试获取整数，或者如果我们找回0（不是数字）之类的内容，则获取NaN。 parseInt()的第二个参数是基数。如果没有这个，输入为072的数字将以八进制（基数8）格式读取，可能不是你想要的。

$('.item-selection-amount').click(function(event) {
        var amount = parseInt($(this).val(), 10) || 0;
        switch (event.which) {
            case 1:
                //set new value +
                $(this).val(amount + 1);
                break;
            case 2:
                //set new value reset
                $(this).val(0);
                break;
            case 3:
                //set new value -
                if(amount > 0){ 
                    $(this).val(amount - 1);
                }
                break;
        }
});

jsFiddle

更新

右键点击事件case 3对我来说不适用于Chrome，因此我将其绑定到contextmenu事件并且有效...

$('.item-selection-amount').click(function(event) {
    var amount = parseInt($(this).val(), 10) || 0;
    switch (event.which) {
    case 1:
        //set new value +
        $(this).val(amount + 1);
        break;
    case 2:
        //set new value reset
        $(this).val(0);
        break;
    case 3:
        //set new value -
        if (amount > 0) {
            $(this).val(amount - 1);
        }
        break;
    }
}).bind('contextmenu', function(event) {
    event.preventDefault();
    var amount = parseInt($(this).val(), 10) || 0;
    if (amount > 0) {
        $(this).val(amount - 1);
    }
})

jsFiddle

jquery元素点击事件只允许一次？ confuddled

1 个答案:

更新