我的 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。这将始终是“/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));