使用該外掛準備工作

jquery.range.js

jquery.js

jquery.range.css

場景【需求】

開始時間必須<=結束時間

當用戶點選開始時間29時應該退回原來的15

1  解決方案不做討論  簡單說下思路為

  設定開始時間的可選範圍  $('.slider').jRange('updateRange', '1,28');

當開始時間的值改變後 使用$('.slider').jRange('updateRange', '5,10');  修改結束時間的可選範圍

結束時間改變後 修改開始時間的可選範圍

2  點選值不可選時退回原來的點

single-sliderb  為開始時間的input class   
 

single-slidere  結束時間的input class

當用戶點選開始時間29時應該退回原來的15

使用$('.single-sliderb').jRange('setValue',value);進行修改

jRange 外掛中有3個事件  分別是

ondragend   滑鼠拖拽後執行

onbarclicked  滑鼠點選後執行

onstatechange  值被改變後執行

我的邏輯是
1滑鼠拖拽後  如果值不符合要求 則退回原值

$('.single-sliderb').jRange({
    from:1,
    to:last,
    step: 1,
    scale
 
: dayArr,
    format: '%s',
    width:850,
    showLabels: true,
    snap: true,
    ondragend:function () {
        var beginyear = $('.beginyear').val();
        var endyear = $('.endyear').val();
        var beginmonth = $('.beginmonth').val();
        var endmonth = $('.endmonth').val();
        var 
 
evalue = $('.single-slidere').val();
        var values = $('.single-sliderb').val(); //8
if(beginyear == endyear && beginmonth==endmonth && Number(values) > Number(evalue)){
            $('.single-sliderb').jRange('setValue',value);
            return false;
       }

        if(value != values){
            $("#modelform").submit()
        }
    }

})


2滑鼠點選後 如果目標值不符合 則退回原值

$('.single-sliderb').jRange({
    from:1,
    to:last,
    step: 1,
    scale: dayArr,
    format: '%s',
    width:850,
    showLabels: true,
    snap: true,
    ondragend:function () {
        var beginyear = $('.beginyear').val();
        var endyear = $('.endyear').val();
        var beginmonth = $('.beginmonth').val();
        var endmonth = $('.endmonth').val();
        var evalue = $('.single-slidere').val();
        var values = $('.single-sliderb').val(); //8
if(beginyear == endyear && beginmonth==endmonth && Number(values) > Number(evalue)){
            $('.single-sliderb').jRange('setValue',value);
            return false;
       }

        if(value != values){
            $("#modelform").submit()
        }
    },
    onbarclicked:function () {
        var beginyear = $('.beginyear').val();
        var endyear = $('.endyear').val();
        var beginmonth = $('.beginmonth').val();
        var endmonth = $('.endmonth').val();
        var evalue = $('.single-slidere').val();
        var values = $('.single-sliderb').val(); //8
if(beginyear == endyear && beginmonth==endmonth && Number(values) > Number(evalue)){
            setTimeout(function(){$('.single-sliderb').jRange('setValue',value)},800); //注意 注意  注意
            return false;
        }

        if(value != values){
            $("#modelform").submit()
        }
    }
});

這裡為什麼要用 serTimeout 執行setValue？
因為
外掛本身有一個滑動的效果【有bug】 就是說我點選 某個值後 外掛執行順序 a改變值 滑動效果 b執行回撥方法
當執行a的時候 滑動需要時間 滑動結束前 我的js就已經執行完畢 包括回撥方法 這時無論回撥方法將值設定為多少 都將繼續執行a的滑動 最終結果都是滑動到點選時候的目標值位置


為什麼滑鼠拖拽後的事件裡面可以不用setTimeout 因為拖拽方法本身就是"滑動效果" 拖拽完後 直接執行回撥 不會執行別的任何東西

如果想使用onstatechange 需要給外掛增加個屬性  clickordrag  判斷是點選進行的改變還是滑動進行的改變

由於這個方法是在改變值後就會執行   導致 使用者如果由 1滑動到10  那麼將會執行10次  實際上我們只需要最終到10的時候的回撥

增加了clickordrag後需要在點選 和滑動事件裡面分別改變這個值得狀態 比如 1 or 2  在回撥方法裡面使用這個屬性判斷使用者是滑動還是點選  只要點選的時候執行自己的程式碼

ps:最佳解決辦法是 在滑動結束後執行回撥方法最為妥當  (解決後再來更改答案)