更新

Question

所以我有一个select和一个函数，可以使用http://filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

将它转换为滑块

<select id="{{ section }}-anonymity-select">
    <option value="anonymous"></option>
    <option value="uw-student"></option>
    <option value="username"></option>
</select>

function setup_form(section){
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: {
        slide: function(event, ui){
            alert(ui.value);
        }
    }
    }).hide();

我想做的是（现在，以后我想根据值更改另一个元素的innerHtml）在用户滑动时提醒滑块的当前值。

代码几乎完全符合我的要求，除了滑动事件“在滑动过程中每次鼠标移动时触发”，这意味着一个小幻灯片大约需要10次。很烦人。不是我想要的。它似乎也以编程方式改变了价值 - 我的手柄不断跳到那里。

我也尝试过更改，但它仅在停止时触发，因此如果用户只是来回滑动而不释放鼠标按钮，则不会发出警报。坏。

我该如何处理？我想我需要一些像“价值变化”这样的事件？但是如何在不经常检查的情况下实现它呢？

Answer 1

您应该使用仅在用户停止与窗口小部件交互时触发的slide事件，而不是使用change事件：

变化：

    slide: function(event, ui){
        alert(ui.value);
    }

要：

    stop: function(event, ui){
        alert(ui.value);
    }

Walaa！：）

当用户停止滑动时会触发此事件。

来源：http://jqueryui.com/demos/slider/#event-stop

更新

您可以使用slide事件并设置超时以提醒值，因此当用户继续滑动时，不会出现任何警报（由于取消超时）：

var slidervalue = 0,
    timer;

function setup_form(section){
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: {
        slide: function(event, ui){
            clearTimeout(timer);
            setTimeout(function () {
                if(ui.value!=slidervalue){
                    $("#"+section+"-anonymity-header").html("Select anonymity level: "+$(this).slider('values', ui.value));
                    slidervalue = ui.value;
                }
             }, 100);
        }
    }
    }).hide();

Answer 2

当然我发布后2分钟我意识到了解决方案。

var slidervalue = 0;

function setup_form(section){
    $("#"+section+"-anonymity-select").selectToUISlider({tooltip: false, labels: 0, sliderOptions: {
        slide: function(event, ui){
            if(ui.value!=slidervalue){
                $("#"+section+"-anonymity-header").html("Select anonymity level: "+ui.value);
                slidervalue = ui.value;
            }
        }
    }
    }).hide();

使用jquery选择更改html滑块滑动事件

2 个答案:

更新