Javascript 在jQuery插件中调用外部函数

我正在写一个简单的范围滑块插件与左右按钮

我使用jQueryUI滑块来实现这一点

所以，在幻灯片或单击时，我想调用插件内部的外部函数

插件代码：

(function($) {
    $.fn.rangeSliders = function(customText){
        var selector = this.selector + ' #slider';
        $(this).html('<div id="sliderContainer"><div id="arrowL" class="left"><img src="left.png" alt="prev" width="28" height="28" id="imgPrev" /></div><div id="slider" ></div><div id="arrowR" class="left" ><img src="right.png" alt="prev" width="28" height="28"  id="imgPrev"/></div></div>');
        $( selector ).slider({
            value: 0,
            min: 0,
            max: 9,
            slide: function (event, ui) {
               calculate(ui.value);
            }
        });

        $("#arrowL").click(function () {
            s.slider('value', s.slider('value') - s.slider("option", "step"));
            //calculate(s.slider('value'));
            });
        $("#arrowR").click(function () {
            s.slider('value', s.slider('value') + s.slider("option", "step"));
            calculate(s.slider('value'));
        });
    }
}(jQuery));

（函数（$）{
$.fn.rangeSliders=函数（自定义文本）{
var selector=this.selector+'#slider'；
$（this.html（“”）；
$（选择器）.滑块({
值：0，
分:0,，
最高：9，
幻灯片：功能（事件、用户界面）{
计算（用户界面值）；
}
});
$（“#箭头”）。单击（函数（）{
s、 滑块（'value'，s.slider（'value'）-s.slider（'option'，'step'））；
//计算（s.滑块（“值”）；
});
$（“#箭头”）。单击（函数（）{
s、 滑块（'value'，s.slider（'value'）+s.slider（'option'，'step'））；
计算（s.滑块（“值”）；
});
}
}（jQuery））；

在我的html中使用插件

<div id="slider1"> </div>

function calculate(){
 //I will get the value from the slider and do some actions
}

$('$slider1').rangeSliders();

函数计算（）{
//我将从滑块获取值并执行一些操作
}
$（'$slider1'）.rangeSliders（）；

我得到一个错误，说计算没有定义

---

你能给我一个好方法来获取这个值或调用插件内部的外部函数吗。

你可以向插件添加一个新参数：

(function($) {
    $.fn.rangeSliders = function(customText, myCalc){
        var selector = this.selector + ' #slider';
        $(this).html('<div id="sliderContainer"><div id="arrowL" class="left"><img src="left.png" alt="prev" width="28" height="28" id="imgPrev" /></div><div id="slider" ></div><div id="arrowR" class="left" ><img src="right.png" alt="prev" width="28" height="28"  id="imgPrev"/></div></div>');
        $( selector ).slider({
            value: 0,
            min: 0,
            max: 9,
            slide: function (event, ui) {
               if($.isFunction(myCalc))
                   myCalc(s.slider('value'));
            }
        });

        $("#arrowL").click(function () {
            s.slider('value', s.slider('value') - s.slider("option", "step"));
            if($.isFunction(myCalc))
                myCalc(s.slider('value'));
            });
        $("#arrowR").click(function () {
            s.slider('value', s.slider('value') + s.slider("option", "step"));
            if($.isFunction(myCalc))
                myCalc(s.slider('value'));
        });
    }
}(jQuery));

（函数（$）{
$.fn.rangeSliders=函数（customText，myCalc）{
var selector=this.selector+'#slider'；
$（this.html（“”）；
$（选择器）.滑块({
值：0，
分:0,，
最高：9，
幻灯片：功能（事件、用户界面）{
if（$.isFunction（myCalc））
myCalc（s.slider（'value'））；
}
});
$（“#箭头”）。单击（函数（）{
s、 滑块（'value'，s.slider（'value'）-s.slider（'option'，'step'））；
if（$.isFunction（myCalc））
myCalc（s.slider（'value'））；
});
$（“#箭头”）。单击（函数（）{
s、 滑块（'value'，s.slider（'value'）+s.slider（'option'，'step'））；
if（$.isFunction（myCalc））
myCalc（s.slider（'value'））；
});
}
}（jQuery））；

现在，您可以按如下方式更改页面：

<div id="slider1"> </div>

function calculate(){
 //I will get the value from the slider and do some actions
}

$('$slider1').rangeSliders(undefined, calculate);

函数计算（）{
//我将从滑块获取值并执行一些操作
}
$（'$slider1'）。范围滑块（未定义，计算）；

---

请注意，我将undefined作为

customText

的第一个参数传递，因此它仍然被处理，就像您将其称为

$（“$slider1”）。rangeSliders（），但仍然让您有机会输入自定义文本。计算函数作为第二个参数传递。请注意，只传递名称，不要在末尾添加（）

(function($) {
    $.fn.rangeSliders = function(customText, myCalc){
        var selector = this.selector + ' #slider';
        $(this).html('<div id="sliderContainer"><div id="arrowL" class="left"><img src="left.png" alt="prev" width="28" height="28" id="imgPrev" /></div><div id="slider" ></div><div id="arrowR" class="left" ><img src="right.png" alt="prev" width="28" height="28"  id="imgPrev"/></div></div>');
        $( selector ).slider({
            value: 0,
            min: 0,
            max: 9,
            slide: function (event, ui) {
               if($.isFunction(myCalc))
                   myCalc(s.slider('value'));
            }
        });

        $("#arrowL").click(function () {
            s.slider('value', s.slider('value') - s.slider("option", "step"));
            if($.isFunction(myCalc))
                myCalc(s.slider('value'));
            });
        $("#arrowR").click(function () {
            s.slider('value', s.slider('value') + s.slider("option", "step"));
            if($.isFunction(myCalc))
                myCalc(s.slider('value'));
        });
    }
}(jQuery));

（函数（$）{
$.fn.rangeSliders=函数（customText，myCalc）{
var selector=this.selector+'#slider'；
$（this.html（“”）；
$（选择器）.滑块({
值：0，
分:0,，
最高：9，
幻灯片：功能（事件、用户界面）{
if（$.isFunction（myCalc））
myCalc（s.slider（'value'））；
}
});
$（“#箭头”）。单击（函数（）{
s、 滑块（'value'，s.slider（'value'）-s.slider（'option'，'step'））；
if（$.isFunction（myCalc））
myCalc（s.slider（'value'））；
});
$（“#箭头”）。单击（函数（）{
s、 滑块（'value'，s.slider（'value'）+s.slider（'option'，'step'））；
if（$.isFunction（myCalc））
myCalc（s.slider（'value'））；
});
}
}（jQuery））；

现在，您可以按如下方式更改页面：

<div id="slider1"> </div>

function calculate(){
 //I will get the value from the slider and do some actions
}

$('$slider1').rangeSliders(undefined, calculate);


函数计算（）{
//我将从滑块获取值并执行一些操作
}
$（'$slider1'）。范围滑块（未定义，计算）；

请注意，我将undefined作为
customText
的第一个参数传递，因此它仍然被处理，就像您将其称为
$（“$slider1”）。rangeSliders（），但仍然让您有机会输入自定义文本。计算函数作为第二个参数传递。请注意只传递名称，不要在末尾添加（）。
为什么不将
calculate（）
函数作为私有函数移动到您的插件中？@VDesign我想在许多页面上使用此插件，每次逻辑都会根据他们使用的页面而改变。有多少不同的
calculate（）
你会有哪些逻辑功能？我现在使用RangeSloider插件至少有17页。每个页面都有自己的逻辑和功能。有没有其他方法可以用不同的方式实现这一点：例如，在幻灯片上，我想从我的html页面中获取值。为什么不移动
calculate（）
将函数作为私有函数插入插件？@VDesign我想在许多页面上使用此插件，每次逻辑都会根据他们使用的页面而改变。有多少不同的
计算（）
你会有哪些逻辑功能？我现在使用RangeSloider插件至少有17页。每个页面都有自己的逻辑和功能。有没有其他方法可以实现这一点：例如，在幻灯片上，我想从我的html页面中获取值。