运行插件的多个实例时出现问题 [英] Problem running multiple instances of a plugin

问题描述

我开发了一个简单的插件，用于将请求发送到JSON文本文件，检索包含图像列表的数据，并将html附加到调用该插件的元素中.

I developed a simple plugin to sent request to a JSON text file, retrieve a data containing image list and append the html in the element calling the plugin.

现在，当代码仅在一个元素上运行时，代码可以正常工作，但是当我在多个元素上使用它时，这些元素现在仅在调用插件的最后一个元素上加载.

Now, the code is working fine while it is running on only one element, but when I am using it on more than one element, now the elements get loaded on the last element calling the plugin only.

插件代码:

$.fn.testPlugin = function(param) {
    var options = {
        url : "",
        pause : 2000,
        callback : 5000
    };
    this.each(function() {
        elementId = $(this).attr("id");
        options = $.extend(options,param);
        if(options.url=="") { console.log("URL is not specified"); }
        else {
            $.post(
                options.url,
                function(data) {
                    $("#"+elementId).html("<ul></ul");
                    $.each(data.dashboard, function(k,v) {
                       html = '<li>';
                       html += '<a href="'+v.TargetUrl+'" target="'+v.Target+'">';
                       html += '<img src="' + v.ImageUrl + '" alt="' + v.Alt +'" title="' + v.OverlayText +'" />';
                       html += '</a><p>'+v.OverlayText+'</p></li>';
                       $("ul",$("#"+elementId)).append(html);
                    });
                },
                "json"
            );
        }
    });

}

插件初始化/执行

$("#this").testPlugin({
    url: 'test.txt'
});
$("#that").testPlugin({
    url: 'text.txt'
}); 

HTML

<div id="this" style="border-style: solid;border-color: #09f;padding: 10px;">
This is a sample div.
</div>

<div id="that" style="border-style: solid;border-color: #09f;padding: 10px;">
Another div
</div>  

更新

我还发现问题是由于AJAX请求而发生的.如果我创建静态列表，然后将其附加到div上，则这次可以使用任意数量的实例化.有关静态调用的演示，请此处.现在，通过从AJAX请求中获取列表来帮助我做同样的事情.

UPDATE

I also found out that the problem is happening due to AJAX request. If I create static list and then append it on the div, this time this works with any number of instantiation. A demo of static call is here. Now, help me do the same by retrieving the list from an AJAX request.

感谢Groovek，此处是实际问题的演示.您会注意到，两个请求的元素都附加到最后一个元素上.

Thanks to Groovek, Here is a demo of the actual problem. You can notice, that the elements of both requests are append to the last element.

推荐答案

您要分配给elementID而不进行声明.这意味着它将是一个全局变量，这意味着它将始终等于分配给它的最后一个对象(在本例中为#that).如果仅保留对元素的本地引用，则代码将起作用.这是经过修改的jsfiddle: http://jsfiddle.net/s9BDT/

You're assigning to elementID without declaring it. This means it'll be a global variable, which means it'll always be equal to the last thing assigned to it (in this case, #that). If you just keep a local reference to the element, the code will work. Here's a modified jsfiddle: http://jsfiddle.net/s9BDT/

each循环"中的代码:

        var el = $(this);
        el.html("<ul></ul>");
        options = $.extend(options,param);
        if(options.url=="") { console.log("URL is not specified"); }
        else {
            $.post(
                //options.url,
                "/echo/json/",
                {json:'{"dashboard":[{"TargetUrl":"toto.html", "Alt" : "sample 1", "ImageUrl":"toto.png", "OverlayText":"toto"},{"TargetUrl":"titi.html", "Alt" : "sample 2", "ImageUrl":"titi.png", "OverlayText":"titi" }]}'},
                function(data) {
                    //alert(data.dashboard);

                    html = '';
                    $.each(data.dashboard, function(k,v) {
                       html += '<li>';
                       html += '<a href="'+v.TargetUrl+'" target="'+v.Target+'">';
                       html += '<img src="' + v.ImageUrl + '" alt="' + v.Alt +'" title="' + v.OverlayText +'" />';
                       html += '</a><p>'+v.OverlayText+'</p></li>';                           
                    });
                    //alert(html);
                    $("ul",el).append(html);
                },
                "json"
            );
        }

这篇关于运行插件的多个实例时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！