Javascript 在具有类似配置的多个目标和页面上使用jQuery插件

我已经成功地配置了一个jQuery插件，如下所示（编辑：注意，我没有要求任何人查看，只回答特定的问题）。现在，我需要使用相同的配置对象对不同的目标执行相同的操作，但第4行上的ID名称除外（即，不是

template1

，它可能是

someOtherTemplateID

）

如何在不复制每页代码的情况下执行此操作

我唯一的想法是创建一个对象，将所有内容都传递给下面的插件，但还包括一个名为

template

的额外属性。然后，我不再硬编码

var source=$（“#template1”）.html（）；

，而是将其更改为

var source=$（“#“+this.template”）.html（）；

，然后设置

myObj.template=“someOtherTemplateID”

，并将插件用作

$（'a.linkPreview'）.ajaxTip（myObj）；

。这种方法听起来并不理想，我希望有一种更干净的方法来做到这一点

$('a.linkPreview').ajaxTip({
    url:'index.php',
    display: function(d){
        var source = $("#template1").html();  //template1 needs to change to another ID 
        var template = Handlebars.compile(source); 
        Handlebars.registerHelper("formatPhoneNumber", function(p) {
            p = p.toString();
            return "(" + p.substr(0,3) + ") " + p.substr(3,3) + "-" + p.substr(6,4);
        });
        Handlebars.registerHelper('fullName', function(f,l) {
            return f + ((f&&l)?" ":"") + l;
        });
        Handlebars.registerHelper('specNumber', function(s) {
            return (s)?s.substr(0,2)+' '+s.substr(2,2)+' '+s.substr(4):'';
        });
        Handlebars.registerHelper('specNumberP', function(s) {
            return (s)?' ('+s.substr(0,2)+' '+s.substr(2,2)+' '+s.substr(4)+')':'';
        });
        return template(data);
    },
    getData:function(){
        var d=ayb.getUrlVars(this.attr('href'));
        d.task='getPopup';
        return d;
    }
});

下面列出了ajaxTip插件。请注意，我认为我的问题不需要它

/*
* jQuery ajaxTip
* Copyright Michael Reed, 2013
* Dual licensed under the MIT and GPL licenses.
*/
(function($){
    var defaults = {
        'url'      : 'getAjaxTip.php', // The url used to get the tooltip data.
        'class'    : '', // Css class(es) to add to tooltip (along with standardAjaxTip).
        'mouseMove': true, // A flag indicating whether to move tooltip with mouse.
        'speed'    : 'fast', // The speed at which to fade in the tool tip.
        'delay'    : 250, // Delay (in ms) before requesting data from server.
        'xOffset'  : 20,
        'yOffset'  : 10,
        'dataType' : 'json',            
        'getData'  : function () {  //Use to set additional data to the server 
            return {}; 
        },
        // A function to transform the data from the server into an html fragment.
        'display'  : function(data) {   
            var htmlString = '';
            $.each(data, function (key, val) {
                htmlString += '<p>' + val + '</p>';
            });
            return htmlString;
        }
    };

    var methods = {
        init : function (options) {
            // Create settings using the defaults extended with any options provided.
            var settings = $.extend({}, defaults, options);

            return this.each(function () {
                var title,
                    timeoutID,
                    ajax,
                    $t,
                    ajaxTip;

                // Wrap the content of the current element in a span.
                $t = $(this).wrapInner('<span />');

                $t.children('span').hover(function(e) {
                    if(!$t.hasClass('ajaxToolActive')) {
                        title = $t.attr('title');
                        $t.attr('title','');  // Remove the title so that it doesn't show on hover.

                        timeoutID = window.setTimeout(function () {
                            ajax = $.get(settings.url, settings.getData.call($t), function (data) {
                                // Create a div to be the tooltip pop up, add the styling as well as
                                // the html (from the display function) to it and then fade the element in
                                // using the speed specified in the settings.
                                ajaxTip = $('<div />')
                                .addClass('standardAjaxTip ' + settings['class'])
                                .html(((title !== '') ? '<h3>' + title + '</h3>' : '') + settings.display.call($t,data))
                                .css('top', (e.pageY - settings.yOffset) + 'px')
                                .css('left', (e.pageX + settings.xOffset) + 'px')
                                .css('position', 'absolute')
                                .appendTo('body')
                                .fadeIn(settings.speed);

                                $t.addClass('ajaxToolActive');
                            }, 
                            settings.dataType);
                        }, settings.delay);
                    }
                },
                function () {
                    // User is no longer hovering so cancel the call to the server and hide the tooltip.
                    if (typeof ajax === 'object') { 
                        ajax.abort(); 
                    }
                    window.clearTimeout(timeoutID);
                    $t.attr('title', title);

                    if ($t.hasClass('ajaxToolActive')) {
                        ajaxTip.remove();
                        $t.removeClass('ajaxToolActive');
                    }
                });

                $t.mousemove(function (e) {
                    if (settings.mouseMove && $t.hasClass('ajaxToolActive')) {
                        ajaxTip.css('top', (e.pageY - settings.yOffset) + 'px')
                            .css('left', (e.pageX + settings.xOffset) + 'px');
                    }
                });
            });
        },
        destroy : function () {
            return this.each(function () {
                var $e = $(this);
                $e.html($e.children('span').html());
            });
        }
    };

    $.fn.ajaxTip = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || ! method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' +  method + ' does not exist on jQuery.ajaxTip');
        }    
    };
}(jQuery));

/*
*jQuery ajaxTip
*迈克尔·里德版权所有，2013年
*MIT和GPL许可下的双重许可。
*/
（函数（$）{
var默认值={
'url'：'getAjaxTip.php'，//用于获取工具提示数据的url。
'class'：''，//要添加到工具提示的Css类（以及standardAjaxTip）。
“mouseMove”：true，//指示是否使用鼠标移动工具提示的标志。
'speed'：'fast'，//在工具提示中淡入的速度。
“延迟”：250，//从服务器请求数据之前的延迟（毫秒）。
“xOffset”：20，
“yOffset”：10，
“数据类型”：“json”，
“getData”：函数（）{//用于设置服务器的其他数据
返回{}；
},
//将服务器中的数据转换为html片段的函数。
“显示”：函数（数据）{
var htmlString=''；
$。每个（数据、函数（键、值）{
htmlString+=''+val+'
'；
});
返回htmlString；
}
};
var方法={
初始化：函数（选项）{
//使用提供的任何选项扩展的默认值创建设置。
var设置=$.extend（{}，默认值，选项）；
返回此。每个（函数（）{
var标题，
timeoutID，
AJAX
$t，
ajaxTip；
//将当前元素的内容包装到范围中。
$t=$（this.wrapInner（“”）；
$t.children（'span'）。悬停（函数（e）{
如果（！$t.hasClass（'ajaxToolActive'））{
标题=$t.attr（‘标题’）；
$t.attr（'title'，''）；//删除标题，使其不会在悬停时显示。
timeoutID=window.setTimeout（函数（）{
ajax=$.get（settings.url，settings.getData.call（$t），函数（data）{
//创建一个div作为工具提示弹出窗口，添加样式以及
//将html（从显示函数）转换为html，然后淡入元素
//使用设置中指定的速度。
ajaxTip=$（''）
.addClass（'standardAjaxTip'+设置['class']））
.html（（（title！=''）“”+title+''“”）+settings.display.call（$t，data））
.css（'top'，（e.pageY-settings.yOffset）+'px'）
.css（'left'，（e.pageX+settings.xOffset）+'px'）
.css（'位置'，'绝对'）
.appendTo（'正文'）
.fadeIn（设置.速度）；
$t.addClass（'ajaxToolActive'）；
}, 
设置（数据类型）；
}，设置。延迟）；
}
},
函数（）{
//用户不再悬停，因此取消对服务器的调用并隐藏工具提示。
如果（ajax的类型=='object'）{
abort（）；
}
clearTimeout（timeoutID）；
$t.attr（“头衔”，头衔）；
如果（$t.hasClass（'ajaxToolActive'））{
ajaxTip.remove（）；
$t.removeClass（'ajaxToolActive'）；
}
});
$t.mousemove（函数（e）{
if（settings.mouseMove&&$t.hasClass（'ajaxToolActive'））{
css（'top'，（e.pageY-settings.yOffset）+'px'）
.css（'left'，（e.pageX+settings.xOffset）+'px'）；
}
});
});
},
销毁：函数（）{
返回此。每个（函数（）{
var$e=$（本）；
$e.html（$e.children（'span'）.html（））；
});
}
};
$.fn.ajaxTip=函数（方法）{
if（方法[方法]）{
返回方法[method].apply（this，Array.prototype.slice.call（arguments，1））；
}else if（typeof方法=='object'| |！方法）{
return methods.init.apply（这是参数）；
}否则{
$.error（'Method'+Method+'在jQuery.ajaxTip上不存在'）；
}    
};
}（jQuery））；

试试看。你可以通过$（“选择器”）调用它。ajaxTip（“templateIdHere”）

（函数（$）{
//使用目标的占位符将对象添加到变量
var defaultObject={
target:null，//稍后在此处传递目标
url:'index.p
(function($) {
    // add object to vars with a placeholder for target
    var defaultObject = {
        target: null, // the target later gets passed in here
        url: 'index.php',
        display: function(data, target) {
            var source = $('#' + target).html();
            /* ... */
        },
        /* ... */
    };

    /* ... */

    .html(((title !== '') ? '<h3>' + title + '</h3>' : '') + settings.display.call($t,data, settings.target))

    /* ... */

    $.fn.ajaxTip = function(method) {
        if (methods[method]) {
            /* ... */
        } else if (typeof method === 'string') {
             return methods.init.call(this, $.extend(defaultObject, {target: method}));
        } else if (typeof method === 'object' || ! method) {
            /* ... */
        } else {
            /* ... */
        }    
    };
}(jQuery));