jquery插件：創建

-1

我期待的輸出是一個無序的列表，它是用jquery創建的......它從一個json文件（當我不創建它作爲插件時工作正常）中接受放入。我非常喜歡構建插件的概念。我試圖創建一個該犯規輸出我的無序列表jquery插件：創建

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>

我很困惑，在這一點上，任何幫助都非常感謝乾杯！

來源

2012-08-28 user1542535

您是否在控制檯中遇到錯誤？（另外，只是一個普通的設計，爲什麼使用'.each（）'循環重複調用_same_ URL來獲得相同的JSON？我建議首先獲取JSON，然後將'.each ）成功回調裏面的循環。） – nnnnnn

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」的out line，「this」不是你想要的那個點。您應該在插件的開頭定義$ this = $（this），以便始終可以訪問原始的「this」。密切關注「這」是什麼是非常重要的。我總是console.log（this）;每隔一段時間，只是爲了確保。

來源

2012-08-28 03:39:40 Julian

jquery插件：創建

回答

相關問題