在 jQuery 插件中调用外部函数答案

【问题标题】：Call external function inside jQuery plugin在 jQuery 插件中调用外部函数
【发布时间】：2014-06-12 07:19:07
【问题描述】：

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

我为此使用 jQuery ui 滑块。

所以在幻灯片或点击时我想在插件中调用一个外部函数。

插件代码：

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

我收到错误消息，提示未定义计算。

谁能给我一个很好的方法来获取这个值或在插件中调用外部函数。

【问题讨论】：

为什么不将calculate() 函数作为私有函数移动到您的插件中？
@VDesign 我想在很多页面上使用这个插件，每次逻辑都会根据他们使用的页面而改变。
您将拥有多少种不同的calculate() 逻辑函数？
我现在使用 rangeSlider 插件至少有 17 个页面。每个页面都有自己的逻辑和功能。
有没有办法以不同的方式实现这种方法：例如在幻灯片上我想从我的 html 页面中获取值。

标签： javascript jquery jquery-ui jquery-plugins jquery-ui-slider

【解决方案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(); 一样进行处理，但仍然让您有机会输入自定义文本。计算函数作为第二个参数传递。请注意仅使用 NAME 传递它，不要在末尾添加 ()。

【讨论】：