我的 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 url：data.url。这将始终是“/error/404error.html”您当前的状态。您应该 data.url 从 options:

拉取

 $.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));

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

Having trouble with my jQuery plugin parameters not firing correctly

javascript

parameters

jquery

options

jquery-plugins