0

jQuery Slider Pluginを操作するために、スライダーを既存のselect要素にバインドするためにjQueryUIデモで提供されている関数を変更しようとしています。この関数は、ユーザーが値をスライダーまたは選択要素のいずれかに変更できるようにする必要があり、他の要素を自動的に更新します。

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>

jQueryUIデモで使用される関数

$(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

コールバックの代わりに 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 に答える
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 に答える