0

我正在尝试修改jQuery UI 演示中给出的函数，以将滑块绑定到现有的选择元素，以便与jQuery Slider Plugin一起使用。该函数应允许用户将值更改为滑块或选择元素，并自动更新另一个元素。

我已经修改了插件的函数，以便在 Select 元素的值更改时更新 Slider，但我不知道如何修改该函数，以便在 Slider 的值更改时更新 Select 元素。

更新 -插件文档有一个“onstatechange function()”，当滑块改变状态时触发，但我不确定如何修改代码以满足我的需要。给出的示例代码是：onstatechange: function( value ){console.dir( this ); }，使用 onStateChange: 函数的小提琴发布在这里：http: //jsfiddle.net/v3gUg/18

HTML & JS

<select name="SliderSelect" id="SliderSelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
<div class="layout">      
    <div class="layout-slider">
      <input id="Slider" type="slider" name="area"  value="3"/>
    </div>
    <script type="text/javascript" charset="utf-8">
    $(function () {
        var select = $("#SliderSelect");
        jQuery("#Slider").slider({ 
            from: 1, 
            to: 5, 
            scale: ['Dislike','','','', 'Love'], 
            limits: false, 
            step: 1, 
            dimension: '',
            skin: "classic"
        }); 
        $("#SliderSelect").change(function () {
            jQuery("#Slider").slider("value", this.selectedIndex + 1);
        });
    });
    </script>
</div>

jQuery UI Demo中使用的函数

$(function () {
    var select = $("#minbeds");
    var slider = $("<div id='slider'></div>").insertAfter(select).slider({
        min: 1,
        max: 6,
        range: "min",
        value: select[0].selectedIndex + 1,
        slide: function (event, ui) {
            select[0].selectedIndex = ui.value - 1;
        }
    });
    $("#minbeds").change(function () {
        slider.slider("value", this.selectedIndex + 1);
    });
});
4

2 回答 2

0

您是否尝试指定一个函数来响应滑块的变化作为change属性？ 

jQuery("#Slider").slider({ 
        from: 1, 
        to: 5, 
        scale: ['Dislike','','','', 'Love'], 
        limits: false, 
        step: 1, 
        dimension: '',
        skin: "classic"
        // add this
        change: function( event, ui ) {  
             //... add your response code here}
        }
    });
于 2013-03-17T01:07:02.560 回答
0

您可以使用 onstatechange 代替回调。效果是您的函数在滑块移动时被触发，它不会等待鼠标向上事件

 jQuery("#Slider").slider({
                from: 0, 
                to: max_slider_val, 
                step: 1, 
                smooth: true, 
                round: 0, 
                dimension: "&nbsp;", 
                skin: "plastic", 
                onstatechange: function( myvalue ){ 
                  console.log(myvalue);
                  } });
于 2016-04-04T07:48:39.447 回答