Jquery ui 1.8.10 范围滑块不适用于 jquery 3.4.1

Posted 2023-05-08

【中文标题】Jquery ui 1.8.10 范围滑块不适用于 jquery 3.4.1

【英文标题】：Jquery ui 1.8.10 range slider is not working with jquery 3.4.1

【发布时间】：2020-04-03 18:31:09

【问题描述】：

范围滑块显示在页面上（我在同一页面上有多个范围滑块）但是当我单击范围滑块时它显示错误：

未捕获的类型错误：无法读取未定义的属性“addClass” 在 b..._mouseCapture (jquery-ui-1.8.10.custom.min.js:71) 在 b..._mouseDown (jquery-ui-1.8.10.custom.min.js:46) 在 htmlDivElement。 (jquery-ui-1.8.10.custom.min.js:45) 在 HTMLDivElement.dispatch (jquery-3.4.1.min.js:4) 在 HTMLDivElement.v.handle (jquery-3.4.1.min.js:4)

我不确定如何解决这个问题，因为我使用了最新的 jQuery UI 1.12.4 版本，但在这种情况下滑块消失了。 有什么建议我该怎么办？

滑块代码：

var findSlider = $('.face_links[data-ref='+this.context.tab_id+'] '+slider.id);

$('.slider-general').slider(
                range: true,
                min: optMin,
                max: optMax,
                step: valueStep,
                values: [ curMin, curMax ],
                slidingInProgress: false,
                create: function(event, ui) 
                        var minColor = $(this).slider( "values", 0 );
                        var maxColor = $(this).slider( "values", 1 )+1;
                        findSlider.find('.pourcent-visu ul li p').slice(minColor, maxColor).css('background', '#298fee');           
                ,
                slide: function( event, ui )  // Interaction
                        slidingInProgress = true;
                        if($.inArray('#'+slider.face, ctrl.locked) == -1)
                            ctrl.locked.push('#'+slider.face);
                        

                        findSlider.find( ".amount_range" ).val( "De " + mapping[ui.values[ 0 ]] + " à " + mapping[ui.values[ 1 ]] );
                        findSlider.find('.new-min-val').val(mapping[ui.values[ 0 ]]);
                        findSlider.find('.new-max-val').val(mapping[ui.values[ 1 ]]);
                        var elemGraphp = findSlider.find('.pourcent-visu ul li p'); 
                        var minColor = ui.values[ 0 ];
                        var maxColor = ui.values[ 1 ]+1;
                        elemGraphP.slice(minColor, maxColor).css('background', '#298fee');
                        elemGraphP.slice(maxColor, totalSteps+1).css('background', '#b2b2b2');
                        elemGraphP.slice(0, minColor ).css('background', '#b2b2b2');
                ,
                change: function( event, ui ) 
                    slidingInProgress = false;
                    $('body').addClass('fav-click');
                    if($.inArray('#'+slider.face, ctrl.locked) != -1 && this.lastSliderChanged == '#'+slider.face) // dans le cas d'un doucle changement sur le même slider'
                        ctrl.locked.push('#'+slider.face);
                    
                    this.lastSliderChanged = '#'+slider.face;
                    //update_range(slider.face, ui.values[0], ui.values[1], mapping);

                    findSlider.find('.btn-ok-slide').fadeIn();

                    if(nSetIntervalIdentifier) clearInterval(nSetIntervalIdentifier);
                    var sliderLoop = nSetIntervalIdentifier = setInterval(function() 
                        clearInterval(sliderLoop);
                        if(slidingInProgress == false)
                            //bRunning = true;
                            //compteur_random();
                            findSlider.find('.btn-ok-slide').hide();
                            findSlider.parent().find('.select-load').removeClass('select-off');

                            if( !findSlider.parent().find('.clear-filters').hasClass('hidden') )
                            
                                findSlider.parent().find('.select-load').addClass('loader_position');
                                findSlider.parent().find(".clear-filters").hide();
                            

                            update_range(slider.face, ui.values[0], ui.values[1], mapping);
                        
                    , 2000);

                
        );```


Here is jQuery ui code:

```/*
 * jQuery UI Slider 1.8.10
 *
 * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Slider
 *
 * Depends:
 *  jquery.ui.core.js
 *  jquery.ui.mouse.js
 *  jquery.ui.widget.js
 */
(function(d)d.widget("ui.slider",d.ui.mouse,widgetEventPrefix:"slide",options:animate:false,distance:0,max:100,min:0,orientation:"horizontal",range:false,step:1,value:0,values:null,_create:function()var b=this,a=this.options;this._mouseSliding=this._keySliding=false;this._animateOff=true;this._handleIndex=null;this._detectOrientation();this._mouseInit();this.element.addClass("ui-slider ui-slider-"+this.orientation+" ui-widget ui-widget-content ui-corner-all");a.disabled&&this.element.addClass("ui-slider-disabled ui-disabled");
this.range=d([]);if(a.range)if(a.range===true)this.range=d("<div></div>");if(!a.values)a.values=[this._valueMin(),this._valueMin()];if(a.values.length&&a.values.length!==2)a.values=[a.values[0],a.values[0]]else this.range=d("<div></div>");this.range.appendTo(this.element).addClass("ui-slider-range");if(a.range==="min"||a.range==="max")this.range.addClass("ui-slider-range-"+a.range);this.range.addClass("ui-widget-header")d(".ui-slider-handle",this.element).length===0&&d("<a href='#'></a>").appendTo(this.element).addClass("ui-slider-handle");
if(a.values&&a.values.length)for(;d(".ui-slider-handle",this.element).length<a.values.length;)d("<a href='#'></a>").appendTo(this.element).addClass("ui-slider-handle");this.handles=d(".ui-slider-handle",this.element).addClass("ui-state-default ui-corner-all");this.handle=this.handles.eq(0);this.handles.add(this.range).filter("a").click(function(c)c.preventDefault()).hover(function()a.disabled||d(this).addClass("ui-state-hover"),function()d(this).removeClass("ui-state-hover")).focus(function()if(a.disabled)d(this).blur();
elsed(".ui-slider .ui-state-focus").removeClass("ui-state-focus");d(this).addClass("ui-state-focus")).blur(function()d(this).removeClass("ui-state-focus"));this.handles.each(function(c)d(this).data("index.ui-slider-handle",c));this.handles.keydown(function(c)var e=true,f=d(this).data("index.ui-slider-handle"),h,g,i;if(!b.options.disabled)switch(c.keyCode)case d.ui.keyCode.HOME:case d.ui.keyCode.END:case d.ui.keyCode.PAGE_UP:case d.ui.keyCode.PAGE_DOWN:case d.ui.keyCode.UP:case d.ui.keyCode.RIGHT:case d.ui.keyCode.DOWN:case d.ui.keyCode.LEFT:e=
false;if(!b._keySliding)b._keySliding=true;d(this).addClass("ui-state-active");h=b._start(c,f);if(h===false)returnbreaki=b.options.step;h=b.options.values&&b.options.values.length?(g=b.values(f)):(g=b.value());switch(c.keyCode)case d.ui.keyCode.HOME:g=b._valueMin();break;case d.ui.keyCode.END:g=b._valueMax();break;case d.ui.keyCode.PAGE_UP:g=b._trimAlignValue(h+(b._valueMax()-b._valueMin())/5);break;case d.ui.keyCode.PAGE_DOWN:g=b._trimAlignValue(h-(b._valueMax()-b._valueMin())/5);break;case d.ui.keyCode.UP:case d.ui.keyCode.RIGHT:if(h===
b._valueMax())return;g=b._trimAlignValue(h+i);break;case d.ui.keyCode.DOWN:case d.ui.keyCode.LEFT:if(h===b._valueMin())return;g=b._trimAlignValue(h-i);breakb._slide(c,f,g);return e).keyup(function(c)var e=d(this).data("index.ui-slider-handle");if(b._keySliding)b._keySliding=false;b._stop(c,e);b._change(c,e);d(this).removeClass("ui-state-active"));this._refreshValue();this._animateOff=false,destroy:function()this.handles.remove();this.range.remove();this.element.removeClass("ui-slider ui-slider-horizontal ui-slider-vertical ui-slider-disabled ui-widget ui-widget-content ui-corner-all").removeData("slider").unbind(".slider");
this._mouseDestroy();return this,_mouseCapture:function(b)var a=this.options,c,e,f,h,g;if(a.disabled)return false;this.elementSize=width:this.element.outerWidth(),height:this.element.outerHeight();this.elementOffset=this.element.offset();c=this._normValueFromMouse(x:b.pageX,y:b.pageY);e=this._valueMax()-this._valueMin()+1;h=this;this.handles.each(function(i)var j=Math.abs(c-h.values(i));if(e>j)e=j;f=d(this);g=i);if(a.range===true&&this.values(1)===a.min)g+=1;f=d(this.handles[g])if(this._start(b,
g)===false)return false;this._mouseSliding=true;h._handleIndex=g;f.addClass("ui-state-active").focus();a=f.offset();this._clickOffset=!d(b.target).parents().andSelf().is(".ui-slider-handle")?left:0,top:0:left:b.pageX-a.left-f.width()/2,top:b.pageY-a.top-f.height()/2-(parseInt(f.css("borderTopWidth"),10)||0)-(parseInt(f.css("borderBottomWidth"),10)||0)+(parseInt(f.css("marginTop"),10)||0);this.handles.hasClass("ui-state-hover")||this._slide(b,g,c);return this._animateOff=true,_mouseStart:function()return true,
_mouseDrag:function(b)var a=this._normValueFromMouse(x:b.pageX,y:b.pageY);this._slide(b,this._handleIndex,a);return false,_mouseStop:function(b)this.handles.removeClass("ui-state-active");this._mouseSliding=false;this._stop(b,this._handleIndex);this._change(b,this._handleIndex);this._clickOffset=this._handleIndex=null;return this._animateOff=false,_detectOrientation:function()this.orientation=this.options.orientation==="vertical"?"vertical":"horizontal",_normValueFromMouse:function(b)var a;
if(this.orientation==="horizontal")a=this.elementSize.width;b=b.x-this.elementOffset.left-(this._clickOffset?this._clickOffset.left:0)elsea=this.elementSize.height;b=b.y-this.elementOffset.top-(this._clickOffset?this._clickOffset.top:0)a=b/a;if(a>1)a=1;if(a<0)a=0;if(this.orientation==="vertical")a=1-a;b=this._valueMax()-this._valueMin();return this._trimAlignValue(this._valueMin()+a*b),_start:function(b,a)var c=handle:this.handles[a],value:this.value();if(this.options.values&&this.options.values.length)c.value=
this.values(a);c.values=this.values()return this._trigger("start",b,c),_slide:function(b,a,c)var e;if(this.options.values&&this.options.values.length)e=this.values(a?0:1);if(this.options.values.length===2&&this.options.range===true&&(a===0&&c>e||a===1&&c<e))c=e;if(c!==this.values(a))e=this.values();e[a]=c;b=this._trigger("slide",b,handle:this.handles[a],value:c,values:e);this.values(a?0:1);b!==false&&this.values(a,c,true)else if(c!==this.value())b=this._trigger("slide",b,handle:this.handles[a],
value:c);b!==false&&this.value(c),_stop:function(b,a)var c=handle:this.handles[a],value:this.value();if(this.options.values&&this.options.values.length)c.value=this.values(a);c.values=this.values()this._trigger("stop",b,c),_change:function(b,a)if(!this._keySliding&&!this._mouseSliding)var c=handle:this.handles[a],value:this.value();if(this.options.values&&this.options.values.length)c.value=this.values(a);c.values=this.values()this._trigger("change",b,c),value:function(b)if(arguments.length)this.options.value=
this._trimAlignValue(b);this._refreshValue();this._change(null,0)return this._value(),values:function(b,a)var c,e,f;if(arguments.length>1)this.options.values[b]=this._trimAlignValue(a);this._refreshValue();this._change(null,b)if(arguments.length)if(d.isArray(arguments[0]))c=this.options.values;e=arguments[0];for(f=0;f<c.length;f+=1)c[f]=this._trimAlignValue(e[f]);this._change(null,f)this._refreshValue()else return this.options.values&&this.options.values.length?this._values(b):this.value();
else return this._values(),_setOption:function(b,a)var c,e=0;if(d.isArray(this.options.values))e=this.options.values.length;d.Widget.prototype._setOption.apply(this,arguments);switch(b)case "disabled":if(a)this.handles.filter(".ui-state-focus").blur();this.handles.removeClass("ui-state-hover");this.handles.attr("disabled","disabled");this.element.addClass("ui-disabled")elsethis.handles.removeAttr("disabled");this.element.removeClass("ui-disabled")break;case "orientation":this._detectOrientation();
this.element.removeClass("ui-slider-horizontal ui-slider-vertical").addClass("ui-slider-"+this.orientation);this._refreshValue();break;case "value":this._animateOff=true;this._refreshValue();this._change(null,0);this._animateOff=false;break;case "values":this._animateOff=true;this._refreshValue();for(c=0;c<e;c+=1)this._change(null,c);this._animateOff=false;break,_value:function()var b=this.options.value;return b=this._trimAlignValue(b),_values:function(b)var a,c;if(arguments.length)a=this.options.values[b];
return a=this._trimAlignValue(a)elsea=this.options.values.slice();for(c=0;c<a.length;c+=1)a[c]=this._trimAlignValue(a[c]);return a,_trimAlignValue:function(b)if(b<=this._valueMin())return this._valueMin();if(b>=this._valueMax())return this._valueMax();var a=this.options.step>0?this.options.step:1,c=(b-this._valueMin())%a;alignValue=b-c;if(Math.abs(c)*2>=a)alignValue+=c>0?a:-a;return parseFloat(alignValue.toFixed(5)),_valueMin:function()return this.options.min,_valueMax:function()return this.options.max,
_refreshValue:function()var b=this.options.range,a=this.options,c=this,e=!this._animateOff?a.animate:false,f,h=,g,i,j,l;if(this.options.values&&this.options.values.length)this.handles.each(function(k)f=(c.values(k)-c._valueMin())/(c._valueMax()-c._valueMin())*100;h[c.orientation==="horizontal"?"left":"bottom"]=f+"%";d(this).stop(1,1)[e?"animate":"css"](h,a.animate);if(c.options.range===true)if(c.orientation==="horizontal")if(k===0)c.range.stop(1,1)[e?"animate":"css"](left:f+"%",a.animate);
if(k===1)c.range[e?"animate":"css"](width:f-g+"%",queue:false,duration:a.animate)elseif(k===0)c.range.stop(1,1)[e?"animate":"css"](bottom:f+"%",a.animate);if(k===1)c.range[e?"animate":"css"](height:f-g+"%",queue:false,duration:a.animate)g=f);elsei=this.value();j=this._valueMin();l=this._valueMax();f=l!==j?(i-j)/(l-j)*100:0;h[c.orientation==="horizontal"?"left":"bottom"]=f+"%";this.handle.stop(1,1)[e?"animate":"css"](h,a.animate);if(b==="min"&&this.orientation==="horizontal")this.range.stop(1,
1)[e?"animate":"css"](width:f+"%",a.animate);if(b==="max"&&this.orientation==="horizontal")this.range[e?"animate":"css"](width:100-f+"%",queue:false,duration:a.animate);if(b==="min"&&this.orientation==="vertical")this.range.stop(1,1)[e?"animate":"css"](height:f+"%",a.animate);if(b==="max"&&this.orientation==="vertical")this.range[e?"animate":"css"](height:100-f+"%",queue:false,duration:a.animate));d.extend(d.ui.slider,version:"1.8.10"))(jQuery);
;

【问题讨论】：

jQueryUI 1.8 已经很老了，不能很好地与最新的 jQuery 配合使用。至少更新到 1.12

我使用了 jquery ui 1.12 并收到此错误jquery-3.4.1.min.js:4 Uncaught Error: cannot call methods on slider prior to initialization; attempted to call method 'value' at Function.error (jquery-3.4.1.min.js:4) at HTMLParagraphElement.<anonymous> (jquery-ui-1.12.4.js:6) at Function.each (jquery-3.4.1.min.js:4) at jQuery.fn.init.each (jquery-3.4.1.min.js:4) at jQuery.fn.init.t.fn.<computed> [as slider] (jquery-ui-1.12.4.js:6)

语法不正确：$('.slider-general")。不能混合使用' 和"。

【参考方案1】：

对于阅读此问题的任何人，如果您从 CDN 中提取，请尝试从最新的 jQuery UI 版本中提取。我也遇到过这个问题，后来用jQuery UI版本解决了。