我的jQuery插件参数无法正确触发时遇到问题

Question

我正在使用许多老化的应用程序，我需要做的是点击应用程序并拉出html表并将它们显示在新页面上，然后更新那里的代码样式。我已经为ajax调用创建了一个插件，我想为url和目标ID提供它的参数，然后在页面的不同部分显示它们。问题在于它接受范围中的最后一个参数，并在doc.ready中的所有函数调用中使用它们。

(function($){
    $.fn.getAppData = function(options) {
            data = $.extend({
                target: $(this),
                id: "body",
                url: "/error/404error.html",
                callback: function(){}
            }, options );
            $.ajax({
                url: data.url,
                cache: false
            })
            .done(function( html ) {
                //alert(data.id);
                $display = $(html).find('div'+data.id);
                data.target.append($display);
                options.callback.call(this);
            })
            .fail(function() {
                alert('Error loading '+data.id+' data.');
            });
        }
    }
}(jQuery));

以下是doc.ready语句中的调用：

$(document).ready(function(e) {
    $('#bulletinBoard').getAppData({
    target: $('#bulletinBoard'),
    id: '#tabs-1',
    url: '/webapps/BulletinBoard/default.cfm',
    callback: function() {
        //manipulate the new loaded html here
    }
});
$('#VTCSchedule').getAppData({
    target: $('#VTCSchedule'),
    id: "#vtcInfo",
    url: "/webapps/VTCInfo/default.cfm",
    callback: function() {
        //manipulate the new loaded html here
    }
});
$('#askMGMT').getAppData({
    target: $('#askMGMT'),
    id: "#askMGMT",
    url: "/webapps/askthera/AskTheRIIManagement.asp",
    callback: function() {
        //manipulate the new loaded html here
    }
});
});

这可能是一个骨头移动，但我没有看到问题，我没有太多时间。提前谢谢。

Answer 1

请注意您的ajax网址：data.url。这总是＆＃34; /error/404error.html"你现在如何拥有它。你应该从options：

获取data.url

 $.fn.getAppData = function(options) {
        $this = $(this);
        data = $.extend({
            id: options.id, // <- this is now dynamic
            url: options.url, // <- this is now dynamic
            callback: function(){}
        }, options );

与data.id相同。

修改

我错了！问题出在data =上。因为您缺少var，所以您将data分配给全局范围，因此每次调用此方法时都会覆盖它。我会改用以下内容：

(function($){
    $.fn.getAppData = function(options) {
            $this = $(this);
            var data = $.extend({ // <- Only available in current scope because of "var"!
                id: "body",
                url: "/error/404error.html",
                callback: function(){}
            }, options );
            $.ajax({
                url: data.url,
                cache: false
            })
            .done(function( html ) {
                //alert(data.id);
                $display = $(html).find('div'+data.id);
                $this.append($display);
                options.callback.call(this);
            })
            .fail(function() {
                alert('Error loading '+data.id+' data.');
            });
        //Also note, that there was an extra bracket "}" here
    }
}(jQuery));