Question

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

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

Answer 1

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（这个）;每隔一段时间，只是为了确保。

jquery插件：创建

1 个答案: