Question

我做了一个控件（数字微调器上下），在表中工作：

JSFIDDLE：http://jsfiddle.net/Leandro1981/wn8vd/1/

我希望模拟＆＃34; mousedown，在鼠标按钮操作时增加＆＃34;但我无法做到。我尝试将它与以下功能脚本混合使用：

JSFIDDLE：http://jsfiddle.net/Leandro1981/kKW85/

但我无法做到。

我的最后一次尝试： http://jsfiddle.net/Leandro1981/S8Zt9/1/

可能错误的是

timeout = setInterval(function () {

但我无法弄明白。我使用bootstrap 3，所以我不能使用一些JQuery UI插件......

任何帮助都会得到预防！

如果您有任何疑问，评论或任何改进此问题的内容，请在下方发表评论，并对不起我的英语：）

请以任何方式免费使用我的代码/控件。

谢谢和亲切的问候

Answer 1

写一个工厂来设置每个控件，这样你就可以对变量进行闭包，现在它只是能够在给定相关元素的情况下使其工作。为此，您需要

在向上和向下节点上收听mousedown以取消更改
启动超时循环以继续进行更改
在mouseup上收听window以确保取消超时循环（您可能还想听取鼠标移除/失去焦点）

所以一起，

function spinFactory(node, up, down) { // I wrote this vanilla :D
    var spinning, delta;
    window.addEventListener('mouseup', stopSpin);
    function spin() {
        node.value = +node.value + delta;
        spinning = setTimeout(spin, 500);
    }
    function stopSpin() { // maybe also invoke this on mouseout/loss of focus
        window.clearTimeout(spinning);
        delta = 0;
    }
    up.addEventListener('mousedown', function spinUp() {
        delta = 1;
        spin();
    });
    down.addEventListener('mousedown', function spinDown() {
        delta = -1;
        spin();
    });
}
// apply to your control, used a bit of jQuery to make life easier
$('.PNET-spinner').each(function () {
    spinFactory(
        this.getElementsByTagName('input')[0],
        $(this).find('.btn:first-of-type')[0],
        $(this).find('.btn:last-of-type')[0]
    );
});

DEMO

Answer 2

我更新了Fiddle here ...请检查一下这可能对您有帮助..

<强>脚本

            $('.PNET-spinner .btn:first-of-type').on('mousedown', function (e) {
                var timer, proxy = this;

                timer = setInterval(function () {
                    increment(proxy);
                }, 200);

                $(document).one("mouseup", function () {
                    increment(proxy);
                    if (timer) clearInterval(timer);
                });
            });
            $('.PNET-spinner .btn:last-of-type').on('mousedown', function () {
                var timer, proxy = this;

                timer = setInterval(function () {
                    decrement(proxy);
                }, 200);

                $(document).one("mouseup", function () {
                    decrement(proxy);
                    if (timer) clearInterval(timer);
                });
            });

        function increment(proxy) {
            var numupdown = $('.PNET-spinner input', $(proxy).closest("tr"));
            var inputValue = parseInt($(numupdown).val(), 10);
            inputValue++;
            $(numupdown).val(inputValue);
        }
        function decrement(proxy) {
            var numupdown = $('.PNET-spinner input', $(proxy).closest("tr"));
            var inputValue = parseInt($(numupdown).val(), 10);
            if (inputValue > 1) {
                inputValue--;
                $(numupdown).val(inputValue);
            }
        }

Answer 3

你只需要处理两件事。首先，应该一次又一次地调用递增和递减文本框中值的函数，直到用户执行mouseout或mouseup。其次，请确保this

中的var numupdown = $('.PNET-spinner input', $(this).closest("tr"));具有正确的值

以下代码显示了如何为增量按钮执行此操作。类似的，你可以实现减量按钮。

var timeout;
var inc = function () {
    var myThis = this;
    var numupdown = $('.PNET-spinner input', $(this).closest("tr"));
    var inputValue = parseInt($(numupdown).val(), 10);
    inputValue++;
    console.log(inputValue);
    $(numupdown).val(inputValue);
    clearTimeout(timeout);
    timeout = setTimeout(function(){
        //http://stackoverflow.com/questions/3630054/how-do-i-pass-the-this-context-to-a-function
        inc.apply(myThis, arguments);
    }, 1000);
};
var incStop = function(){
    clearTimeout(timeout);
}
$('.PNET-spinner .btn:first-of-type').on('mousedown', inc);
$('.PNET-spinner .btn:first-of-type').on('mouseup', incStop);
$('.PNET-spinner .btn:first-of-type').on('mouseout', incStop);

选中DEMO here。

使用mousedown模拟微调器编号

3 个答案: