Question

在我的应用程序中，一旦用户在微调器中输入了某个值，我应该更改视图的内容。作为这个过程的一部分，我需要销毁和删除微调器。

问题在于微调器进入循环并将其值增加到无止境。示例代码：

spinner = $( "#spinner" ).spinner({
    change: function( event, ui ) {
        console.log('change');
    },
    spin: function( event, ui ) { 
            console.log( 'spin event, value = ', ui.value );
        if ( ui.value == 3 ) {
            spinner.spinner( "destroy" );
        }
    }
});

请检查以下示例：http://jsfiddle.net/XseWc/312/

增加值3次：点击，点击，点击

如何实现这一目标？

更新：这里有两个选项。

使用停止事件而不是旋转。
在销毁微调器之前触发鼠标按下事件。使用鼠标向上微调器将删除它的处理程序和销毁将正常工作。

Answer 1

只是阻止默认事件！

spinner = $( "#spinner" ).spinner({
    change: function( event, ui ) {
        console.log('change');
    },
    spin: function( event, ui ) {  
        if ( ui.value == 3 ) {
            //NEW
            event.preventDefault();
            spinner.spinner( "destroy" );
       }
    }
});

old fiddle

见documentation entry。它可以防止微调器执行正常（默认）行为。

编辑

也许这可以看作是一种解决方法，但这种解决方案有效并且不会引发大量错误。

$(function () {
    var value;
    spinner = $("#spinner").spinner({
        change: function (event, ui) {
            console.log('change');
        },
        spin: function (event, ui) {
            value = ui.value;
        },
        stop: function (event, ui) {
            if (value == 3) {
                $(this).spinner("destroy");

            }
        }
    });
});

updated fiddle

Answer 2

试试这个（hide（）和remove（）都适用于我）

spinner = $( "#spinner" ).spinner({
    change: function( event, ui ) {
        console.log('change');
    },
    spin: function( event, ui ) {  
        if ( ui.value == 3 ) {
            spinner.hide();
        }
    }
});

Answer 3

这会实现你想要的吗？

spinner = $( "#spinner" ).spinner({
    change: function( event, ui ) {
        console.log('change');
    },
    spin: function( event, ui ) {  
        if ( ui.value == 3 ) {
            spinner.remove();
        }
    }
});

一旦达到一定值，如何正确销毁微调器

3 个答案: