Jquery ui滑块滑动功能的问题答案

【问题标题】：Problems with Jquery ui slider slide functionJquery ui滑块滑动功能的问题
【发布时间】：2012-12-03 06:41:05
【问题描述】：

使用this question 的第二个答案，我为 4 句柄 jquery 滑块编写了代码。它工作正常，但后来我不得不在同一页面中制作多个滑块，所以我尝试对我的代码进行一些模块化，将幻灯片功能分开。现在滑块中的处理程序完全重叠，完全忽略了我为这种情况设置的条件。

这是我的幻灯片功能的代码以及我如何在滑块设置中调用它：

滑动功能：

function slidegen(event,ui,index){

    //Code for handler 0
    if(ui.handle == $("#weightage_slider_"+index+"_0").get(0)){
        if(ui.values[0] >= ui.values[1]){

            /*FOR SOME REASON THE NEXT LINE HAS NO EFFECT*/

            $("#weightage_slider_"+index).slider('values', 0, ui.values[1]); 
            return false;
        } else {
            // handle-0 will move
            // update display of colored handle ranges
            $("#weightage_slider_a_"+index).css('left', '0%');
            $("#weightage_slider_a_"+index).css('width', (to100(ui.values[0])+'%'));
            $("#weightage_slider_b_"+index).css('left', (to100(ui.values[0])+'%'));
            $("#weightage_slider_b_"+index).css('width', ((to100(ui.values[1])-to100(ui.values[0]))+'%'));
        }
    }

    /*SIMILAR CODE FOR THE REST OF THE HANDLERS HERE*/
}

滑块设置：

$("#weightage_slider_0").slider({ 
    min: 1,
    max: 5,
    step: 0.01,
    values: handlers, // set four handles
    slide: function(event, ui) {
        slidegen(event,ui,0);
    }, 
    change: function(event, ui) {    
        changen(event,ui,0);
    }
});

我了解在滑动期间，会发生以下顺序：(i) 更改 ui.value (ii) 调用滑块函数 (iii) 移动滑块句柄。可能是因为我在滑块函数中进行了另一个调用，因此发生了错误，因此我正在更改该顺序？

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

问题解决了！您似乎无法将要用作设置的功能模块化。我认为它必须与范围问题有关。相反，我将整个滑块创建模块化，如下所示或this link

function makeslider(index,h) {
        $("#weightage_slider_" + index).slider({
            min: 1,
            max: 5,
            step: 0.01,
            values: h,
            // set four handles
            slide: function(event, ui) {
                /*Generic slide function code here*/
            },
            change: function(event, ui) {
                /*Generic change function code here*/
            }, 
            create: function(event, ui) {
                /*Generic create function code here*/
            }    
        });
}

makeslider(0, handlers);
makeslider(1, handlers1);
makeslider(2, handlers2);

【讨论】：