-1

我期望的输出是一个无序列表，它是用 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);

    }); 
}

并调用插件：

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

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

});
</script>

在这一点上我很困惑任何帮助都非常感谢欢呼！

4

1 回答 1

0

http://jsfiddle.net/c6vnp/7/ 我用示例数据替换了 url 并删除了 .get 调用。但它应该给出与使用 ajax 获取数据时相同的结果。

我所做的是

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

代替

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

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

(function($){

})(jQuery);

并将 jQuery 称为 $

此外，将菜单附加到“this”的注释掉的行，“this”不是你想要的。您应该在插件的开头定义 $this = $(this) 以便您始终可以访问原始的“this”。密切关注“这个”是什么是非常重要的。我总是 console.log(this); 每隔一段时间，只是为了确保。

于 2012-08-28T03:39:40.177 回答