javascript - 在 jQuery 插件中调用外部函数

Question

我正在编写一个带有左右按钮的简单范围 slider 插件。

我为此使用 jQuery ui slider 。

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

插件代码:

(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));

在我的 html 中使用插件

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

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

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

我收到错误消息，指出计算未定义。

您能建议我一种获取此值或调用插件内的外部函数的好方法吗？

Answer 1

您可以向插件添加新参数:

(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));

现在您可以像这样更改页面:

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

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

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

请注意，我将 undefined 作为 customText 的第一个参数传递，因此它仍然被处理，就像您将其称为 $('$slider1').rangeSliders();，但仍然让您有机会输入自定义文本。计算函数作为第二个参数传递。请注意仅使用名称传递它，不要在末尾添加 ()。