jquery - jquery 从 0 递增到 100，然后每 25

Question

我有一个按钮，可以将输入值增加或减少 25。
但是，我希望它跳过 25、50、75 步，所以它会变为 0,100,125,150，......
我认为这应该可以通过if 声明关于增量，但不确定如何以及在何处实现它。

我在概括代码时也遇到了一些问题，因此我可以将它与多个输入字段一起使用。我已经尝试过 e.target、event.target、this.. 的组合。到目前为止，没有任何效果。

var element = $(this).siblings(':input');
var element = $(e.target).closest(".value");

http://jsfiddle.net/aC45a/5/

这是我第一次使用 jquery，标记让我很困惑，所以任何帮助将不胜感激:)

Answer 1

从 100 开始第一个增量的最简单方法。

increment = Math.max(100, increment + 25);

所以在你的代码中，这将是......

element.val(Math.max(100, parseInt(element.val(), 10) + 25));

您可以使用...解决您的多个字段问题

var element = $(e.target).siblings(".value");

Answer 2

要查找相应的输入元素，请使用$(this).siblings(".value").

为了跳过 0 到 100 之间的数字，我使用条件表达式。我将它封装成一个递减函数，因为在初始点击和自动重复计时器中都需要它。这对于增量操作不是必需的，因为它保证在重复发生时您将高于 100。

小提琴

function dec25(oldval) {
    return oldval <= 100 ? 0 : oldval - 25;
}

$('.inc25').on({
    mousedown : function(e) {
        var element = $(this).siblings(".value");
        var oldval = parseInt(element.val(), 10);
        var newval = oldval == 0 ? 100 : oldval + 25;
        element.val(newval);

        timeout = window.setTimeout(function () {
            interval = window.setInterval(function() {
                element.val(parseInt(element.val(), 10) + 25);
            }, 200);      
        }, 400);

        e.preventDefault();        
    },
    mouseup : function() {
        window.clearTimeout(timeout);
        window.clearInterval(interval);
    }
});

$('.dec25').on({
    mousedown : function(e) {
        var element = $(this).siblings(".value");
        element.val(dec25(parseInt(element.val(), 10)));

        timeout = window.setTimeout(function () {
            interval = window.setInterval(function() {
                element.val(dec25(parseInt(element.val())));
            }, 200);      
        }, 400);

        e.preventDefault();        
    },
    mouseup : function() {
        window.clearTimeout(timeout);
        window.clearInterval(interval);
    }
});

Answer 3

递增是一个javascript问题，而不是jquery。我会这样处理它以增加：

value += 25;
if (value < 100)
    value = 100;

像这样递减：

value -= 25;
if (value < 100)
    value = 0;

有一些方法可以进一步压缩代码，但这可能是最好的可读性。

Answer 4

看这个

http://jsfiddle.net/L3yUK/1/

我只调整了增量功能。

相关代码：

$('.inc25').on({
    mousedown : function() {

        var element = $(this).parent().children(".value");
        var v = parseInt(element.val());

        element.val(v + (v>=100?25:100));

元素在 mousedown 处理程序中定义。

$(this) 指向被点击的元素

$(this).parent() 指向父 div

$(this).parent().child(".value") 潜入 div 以获取类“value”的元素

获取实际值并存储到变量v

然后做你的数学/逻辑：增加v，多少？如果 v>=100 增加 25，否则增加 100。