Javascript 在单个页面上定义jQueryUI小部件的多个实例

我正在开发一个网站，在那里我使用一个定制的buildjquery小部件将数据加载到多个div中

这是小部件的代码：

(function ($, window, document, undefined) {

    $.widget ("my.contentloader", {

        options: {

            loading_message: true

        },

        _create: function () {

            var that = this;

            $.ajax ({

                type: "POST", 

                url: that.options.url, 

                data: {data: that.options.formdata, limit: that.options.limit, offset: that.options.offset},

                beforeSend: function (html) {

                    if (that.options.loading_message) {

                        $(that.options.target_area).html ("<div id='loading'>Loading</div>");

                    }

                },

                success: function (html) {

                    if (that.options.loading_message) {

                        $('#loading').remove ();

                    }

                    $(that.options.target_area).html (html);

                },

                error: function (html) {

                    $(that.options.error_area).html (html);

                }

            });

        },

        _setOption: function (key, value) {

            this.options[key] = value;

            $.Widget.prototype._setOption.apply (this, arguments);

    }

    });

})(jQuery, window, document);

$('#targetdiv').contentloader ({

 url: '<?php echo $action_url; ?>',

 target_area: '#popup_box',

 formdata: {'username' : username_email, 'password' : password}

});

---

我认为您需要将每个实例分配给一个变量。这样，您就可以控制每个实例，或者编写一个迭代实例数组的函数

var contentLoaders = [];
$('.target-div').each(function(i, data) {
    contentLoaders[i] = $.widget("my.contentloader", { ... });
});

因此，您应该能够独立操作每个装载机，如：

for (var i in contentLoaders) {
    var contentLoader = contentLoaders[i];
    contentLoader.option( ... );
}

此外，您正在对小部件的多个实例使用DOM ID$（“#加载”）。这是错误的。您需要为每个小部件使用单独的加载程序，或者检查ID是否存在，如果不存在，则只插入新节点。移除它也一样

**我添加了这个示例块，希望它有帮助：**

//
// This is a way to do it if you want to explicitly define each contentloader.
// Below that, I'll write out a way to define the contentloaders in a loop.
//


var contentLoader1 = $('#targetdiv1').contentloader ({
 url: '<?php echo $action_url; ?>',
 target_area: '#popup_box',
 formdata: {'username' : username_email, 'password' : password}
});
contentLoader1.option('url', 'http://google.com');

var contentLoader2 = $('#targetdiv2').contentloader ({
 url: '<?php echo $action_url; ?>',
 target_area: '#popup_box',
 formdata: {'username' : username_email, 'password' : password}
});
contentLoader2.option('url', 'http:/apple.com');

// Push each widget instance into an array of widget objects
var contentLoaders = [];
contentLoaders.push(contentLoader1);
contentLoaders.push(contentLoader2);
for (var i in contentLoaders) {
    console.log(i, contentLoaders[i].option('url'));
}
// Should print:
// 0 http://google.com
// 1 http://apple.com



//
//
// How to set a bunch of widgets at once from an array of content loader data
//
//

var contentLoaderData = [
    {
        divid: '#targetDiv1',
        url: 'google.com',
        formdata: {
            username: 'joeshmo',
            password: 'joeshmo1'
        }
    },
    {
        divid: '#targetDiv2',
        url: 'apple.com',
        formdata: {
            username: 'plainjane',
            password: 'plainjane1'
        }
    }
];

// Array of widget instances
var contentLoaders = [];
$.each(contentLoaderData, function(index, value) {
    var contentLoader = $(this.divid).contentloader({
        url: this.url,
        target_area: '#popup_box',
        formdata: {'username' : this.formdata.username, 'password' : this.formdata.password}
    });
    // Push each contentLoader instance into the contentLoaders array
    contentLoaders.push(contentLoader);
});
for (var i in contentLoaders) {
    console.log(i, contentLoaders[i].option('url'));
}
// Should print:
// 0 http://google.com
// 1 http://apple.com

//
//如果要显式定义每个contentloader，这是一种方法。
//下面，我将写出一种在循环中定义ContentLoader的方法。
//
var contentLoader1=$（'#targetdiv1'）。contentloader({
url:“”，
目标区域：“#弹出框”，
formdata:{'username'：用户名\电子邮件，'password'：密码}
});
contentLoader1.option（'url'，'http://google.com');
var contentLoader2=$（'#targetdiv2'）。contentloader({
url:“”，
目标区域：“#弹出框”，
formdata:{'username'：用户名\电子邮件，'password'：密码}
});
选项（'url'，'http:/apple.com'）；
//将每个小部件实例推送到小部件对象数组中
var contentLoaders=[]；
contentLoaders.push（contentLoader1）；
contentLoaders.push（contentLoader2）；
for（contentLoaders中的变量i）{
log（i，contentLoaders[i]。选项（'url'）；
}
//应打印：
// 0 http://google.com
// 1 http://apple.com
//
//
//如何从内容加载器数据数组中一次设置一组小部件
//
//
var contentLoaderData=[
{
divid:“#targetDiv1”，
url:'google.com'，
表格数据：{
用户名：“joeshmo”，
密码：“joeshmo1”
}
},
{
divid:“#targetDiv2”，
url:'apple.com'，
表格数据：{
用户名：“plainjane”，
密码：“1”
}
}
];
//小部件实例数组
var contentLoaders=[]；
$.each（contentLoaderData，函数（索引，值）{
var contentLoader=$（this.divid）.contentLoader({
url:this.url，
目标区域：“#弹出框”，
formdata:{'username'：this.formdata.username，'password'：this.formdata.password}
});
//将每个contentLoader实例推入contentLoaders数组
contentLoaders.push（contentLoader）；
});
for（contentLoaders中的变量i）{
log（i，contentLoaders[i]。选项（'url'）；
}
//应打印：
// 0 http://google.com
// 1 http://apple.com

我是否需要使用.each和for循环，还是可以只使用：contentLoaders[1]=$.widget（“my.contentloader”，{…}）；我得到以下错误：Uncaught TypeError:无法设置undefinedoy的属性“0”，如果您将其放在JSFIDLE中，我可以帮助解决问题是的，如果您愿意，可以使用“contentLoaders[1]=…”。我给出的循环可以一次完成一堆div，但您肯定可以一次完成一个div。这些代码是进入小部件本身还是进入调用页面？您是否可以将您的代码与我的代码合并？该示例代码有意义吗？

//
// This is a way to do it if you want to explicitly define each contentloader.
// Below that, I'll write out a way to define the contentloaders in a loop.
//


var contentLoader1 = $('#targetdiv1').contentloader ({
 url: '<?php echo $action_url; ?>',
 target_area: '#popup_box',
 formdata: {'username' : username_email, 'password' : password}
});
contentLoader1.option('url', 'http://google.com');

var contentLoader2 = $('#targetdiv2').contentloader ({
 url: '<?php echo $action_url; ?>',
 target_area: '#popup_box',
 formdata: {'username' : username_email, 'password' : password}
});
contentLoader2.option('url', 'http:/apple.com');

// Push each widget instance into an array of widget objects
var contentLoaders = [];
contentLoaders.push(contentLoader1);
contentLoaders.push(contentLoader2);
for (var i in contentLoaders) {
    console.log(i, contentLoaders[i].option('url'));
}
// Should print:
// 0 http://google.com
// 1 http://apple.com



//
//
// How to set a bunch of widgets at once from an array of content loader data
//
//

var contentLoaderData = [
    {
        divid: '#targetDiv1',
        url: 'google.com',
        formdata: {
            username: 'joeshmo',
            password: 'joeshmo1'
        }
    },
    {
        divid: '#targetDiv2',
        url: 'apple.com',
        formdata: {
            username: 'plainjane',
            password: 'plainjane1'
        }
    }
];

// Array of widget instances
var contentLoaders = [];
$.each(contentLoaderData, function(index, value) {
    var contentLoader = $(this.divid).contentloader({
        url: this.url,
        target_area: '#popup_box',
        formdata: {'username' : this.formdata.username, 'password' : this.formdata.password}
    });
    // Push each contentLoader instance into the contentLoaders array
    contentLoaders.push(contentLoader);
});
for (var i in contentLoaders) {
    console.log(i, contentLoaders[i].option('url'));
}
// Should print:
// 0 http://google.com
// 1 http://apple.com