Question

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

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

插件代码：

$.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上，这次这适用于任何数量的实例化。静态调用的演示是here。现在，通过从AJAX请求中检索列表来帮助我做同样的事情。

更新2

感谢Groovek，Here是实际问题的演示。您可以注意到，两个请求的元素都附加到最后一个元素。

Answer 1

您在未声明的情况下分配给elementID。这意味着它将是一个全局变量，这意味着它将始终等于分配给它的最后一个东西（在本例中为#that）。如果您只保留对元素的本地引用，则代码将起作用。这是一个经过修改的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"
            );
        }

运行多个插件实例时出现问题

更新

更新2

1 个答案: