Question

我正在使用jQuery 1.7.1和jQueryUI 1.9.1。

我有一个微调器，每次更改时，都会创建或删除一个文本字段以匹配微调器上的数字。按住按钮将导致数字变化非常快，导致创建或删除大量字段。

不是一个大问题，因为它是客户端，但我只是不喜欢它。所以我想在用户握住微调器按钮时禁用快速旋转。

我想出了一个使用incremental函数的解决方案，如下所示：

var incrementalFunction = function(numOfSpins) {
    if (numOfSpins == 1) {
        return 1;
    }
    return 0;
};

这起初效果很好，但引起了另一个问题。在每个新创建的文本框旁边，我创建了一个“删除”按钮，该按钮将删除元素并减少微调器。但是当我调用stepDown方法时，由于某种原因，这会调用我的增量函数，每次调用它时都会增加numOfSpins。所以它只会减少一次。

任何人都有一个更直接的解决方案来阻止用户按住递增/递减按钮（或键盘上的向上/向下箭头）？

Answer 1

如果您使用stop事件，则可以检测何时进行选择，而不是定位每个增量。然后，您可以将该数字与当前数量进行比较，并确定要执行的操作 - 删除或添加更多内容。试试这个：

var targetArea = $("#target_area");

targetArea.on("click", ".remover", function () {
    $(this).closest("div").remove();
    $("#input1").spinner("stepDown");
});

$("#input1").spinner({
    stop: function (event, ui) {
        var $this = $(this);
        var num = $this.val();

        var newTargets = targetArea.find("div");
        var difference = num - newTargets.length;
        if (difference < 0) {
            newTargets.slice(difference).remove();
        } else if (difference > 0) {
            for (var i = 0; i < difference; i++) {
                var newTarget = $("<div><input type='text' /><span class='remover' title='Remove'>&times;</span></div>");
                targetArea.append(newTarget);
            }
        }
    }
});

DEMO： http://jsfiddle.net/PJpUC/1/

Answer 2

如果升级到jQuery UI 1.10，问题就会消失。请参阅https://github.com/jquery/jquery-ui/commit/0d53fbfd0b7651652601b3b8577225ab753aab44，这会导致stepUp()和stepdDown()按照您的预期行事。

禁用按住jQueryUI微调器上的向上和向下按钮

2 个答案: