jquery插件：创建

我期望的输出是一个无序列表，它是用jquery创建的……它从一个json文件中输入（当我不将它创建为插件时，它工作得很好）。我对构建插件的概念非常陌生。我试图创建一个不输出无序列表的列表

json文件结构

{
    "Categories": [
    {
        "cat_id":"1",
        "name":"Main Menu1",
         "sub_categories":[
         {
             "cat_id":"10",
             "name":" Sub Menu11",
             "sub_level_one_link":"http:\/\/one.com"
         },

我的js文件

//create plugin 
jQuery.fn.emrMenu= function (options) {
    myoptions = jQuery.extend ({ url: "error" }, options);

    if (myoptions.url=="error") { alert("Error:No data recieved"); return false; }
    $(this).html (myoptions.url);

    return this.each (function () { 

        //alert(myoptions.url+this.id);

        $.getJSON(myoptions.url,  function(data)
        {
            $.each(data.Categories, function(i, category)
            { 
                alert("test1");
                //get all sub menu items in list indexes      
                var submenudata='';
                $.each(category.sub_categories, function(i, sub_categories)
                { 
                    submenudata += "<li><a href='"+sub_categories.sub_level_one_link+"' <span>"+sub_categories.name+"</span></a></li>";

                });
                var menudata ="<li id='"+category.cat_id+"' class='has-sub '><a href='#'><span>"+category.name+"</span></a><ul>"+submenudata+"</ul></li>";                      
                //stringify unordered list and bind to div              
                var menu="<ul>"+menudata+"</ul>";

                //   $(menu).appendTo("#"this.id);
             });
        });           

        //alert (this.id);

    }); 
} 

//创建插件
jQuery.fn.emrMenu=函数（选项）{
myoptions=jQuery.extend（{url:“error”}，选项）；
if（myoptions.url==“error”）{alert（“error:No data received”）；返回false；}
$（this.html（myoptions.url）；
返回this.each（函数（）{
//警报（myoptions.url+this.id）；
$.getJSON（myoptions.url，函数（数据）
{
$.each（data.Categories，function（i，Categories）
{ 
警报（“测试1”）；
//获取列表索引中的所有子菜单项
var子菜单数据=“”；
$.each（category.sub_categories，function（i，sub_categories）
{ 
子菜单数据+=“
”；
});
var menudata=“
“+子菜单数据+”
”；
//将无序列表字符串化并绑定到div
var menu=“
”+menudata+”
”；
//$（menu.appendTo（“#”this.id））；
});
});           
//警报（this.id）；
}); 
} 

我正在调用插件：

<script>
$(document).ready(function() {

    $('#menu_n').emrMenu ({ url: "menu_data.json"});

});
</script>

$（文档）.ready（函数（）{
$（'#menu_n'）.emrMenu（{url:“menu_data.json”}）；
});

我现在很困惑，非常感谢您的帮助，干杯

我用示例数据替换了url，并删除了.get调用。但是它应该给出与使用ajax获取数据相同的结果

我所做的是

var myoptions = jQuery.extend ({ url: "error" }, options);

而不是

myoptions = jQuery.extend ({ url: "error" }, options);

另外，整个插件应该包含在

(function($){

})(jQuery);

并将jQuery称为$

---

此外，将菜单附加到“this”、“this”的注释掉的行不是您当时想要的。您应该在插件的开头定义$this=$（this），这样您就可以始终访问原始的“this”。密切关注“这”是什么非常重要。我总是控制台.log（这个）；每隔一段时间，只是为了确认一下。

控制台中是否有错误？（另外，这只是一个一般的设计问题，为什么要使用

.each（）

循环来重复调用同一URL以获得相同的JSON？我建议先获取JSON，然后将

.each（）

循环放入成功回调中。）