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

我开发了一个简单的插件，将请求发送到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"
            );
        }
    });

}

HTML

这是一个示例div。
另一个部门

使现代化 我还发现问题是由AJAX请求引起的。如果我创建静态列表，然后将其附加到div上，这一次可以使用任意数量的实例化。下面是一个静态调用的演示。现在，通过从AJAX请求中检索列表来帮助我做同样的事情

更新2

---

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

您正在分配给

elementID

，而没有声明它。这意味着它将是一个全局变量，这意味着它将始终等于分配给它的最后一个变量（在本例中为#that）。如果只保留对元素的本地引用，代码将正常工作。下面是一个经过修改的JSFIDLE：

每个循环中的代码：

        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"
            );
        }

var el=$（这个）；
html（“
”）；
选项=$.extend（选项，参数）；
if（options.url==“”）{console.log（“未指定url”）；}
否则{
美元邮政(
//options.url，
“/echo/json/”，
{json:{“dashboard”：[{“TargetUrl”：“toto.html”，“Alt”：“示例1”，“ImageUrl”：“toto.png”，“overlyText”：“toto”}，{“TargetUrl”：“titi.html”，“Alt”：“示例2”，“ImageUrl”：“titi.png”，“overlyText”：“titi”}]}，
功能（数据）{
//警报（数据、仪表板）；
html=''；
$。每个（数据、仪表板、功能（k、v）{
html+=“
”；
html+=''+v.overlyText+'
'；
});
//警报（html）；
$（“ul”，el）.append（html）；
},
“json”
);
}

您正在分配给

elementID

，但没有声明它。这意味着它将是一个全局变量，这意味着它将始终等于分配给它的最后一个变量（在本例中为#that）。如果只保留对元素的本地引用，代码将正常工作。下面是一个经过修改的JSFIDLE：

每个循环中的代码：

        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"
            );
        }

var el=$（这个）；
html（“
”）；
选项=$.extend（选项，参数）；
if（options.url==“”）{console.log（“未指定url”）；}
否则{
美元邮政(
//options.url，
“/echo/json/”，
{json:{“dashboard”：[{“TargetUrl”：“toto.html”，“Alt”：“示例1”，“ImageUrl”：“toto.png”，“overlyText”：“toto”}，{“TargetUrl”：“titi.html”，“Alt”：“示例2”，“ImageUrl”：“titi.png”，“overlyText”：“titi”}]}，
功能（数据）{
//警报（数据、仪表板）；
html=''；
$。每个（数据、仪表板、功能（k、v）{
html+=“
”；
html+=''+v.overlyText+'
'；
});
//警报（html）；
$（“ul”，el）.append（html）；
},
“json”
);
}

我试图创建一个提琴，但我不知道如何模拟ajax请求。如果有人知道一个可接受的解决方案，请用fiddle更新我的问题。我将fiddle更新为模拟ajax请求：@Grooveek，非常感谢您的帮助。我试图创建一个fiddle，但我不知道如何模拟ajax请求，在那里。如果有人知道一个可接受的解决方案，请用提琴更新我的问题。我将提琴更新为模拟ajax请求：@Grooveek，非常感谢您的帮助。@Starx:Huh，我的最后一个更改似乎被JSFIDLE丢失了。尝试：。这对我来说是两个部门的负担。我真的很感谢你的帮助。Thanks@Starx：哈，看来我最后的零钱被JSFIDLE弄丢了。尝试：。这对我来说是两个部门的负担。我真的很感谢你的帮助。谢谢

        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"
            );
        }