ハンバーガーメニューの配列から

Question

私はハンバーガーメニューのための私のコードで助けが必要です。私はjqueryのにメニュー要素を作成するには、この配列を使用する必要があります。ここでは

var menu = [{ 
    'title': 'Save', 
    'onclick': function() { 
    alert('Open clicked'); 
    } 
}, { 
    'title': 'Load', 
    'onclick': function() { 
    alert('Close clicked'); 
    } 
}, { 
    'title': 'Hide menu', 
    'onclick': function() { 
    //put a code to close menu 
    } 
}]; 

は、私がこれまで持っていると私は配列で動作するようにそれを更新するために、上記の配列を使用するために必要なものです。

jQueryの

$(document).ready(function() { 

$('#menulink').click(function(event) { 
    event.preventDefault(); 
    if($('.navigation-wrapper').hasClass('show-menu')) { 
     $('.navigation-wrapper').removeClass('show-menu'); 
     $('.navigation').hide(); 
     $('.navigation li').removeClass('small-padding'); 
    } else { 
     $('.navigation-wrapper').addClass('show-menu'); 
     $('.navigation').fadeIn(); 
     $('.navigation li').addClass('small-padding'); 
    } 
}); 

    }); 

HTML

<a id="menulink" href="#"> 
    <div class="hamburger-wrapper"> 
    <div class="inner-hamburger-wrapper"> 
      <div class="hamburger"></div> 
     <div class="hamburger"></div> 
     <div class="hamburger"></div> 
    </div> 
    <div class="menu-title"><p>Menu</p></div> 
</div> 
</a> 

<ul class="navigation"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Menu Item 2</a></li> 
    <li><a href="#">Menu Item 3</a></li> 
    <li><a href="#">Menu Item 4</a></li> 
    <li><a href="#">Menu Item 5</a></li> 
    <li><a href="#">Menu Item 6</a></li> 
    </ul> 

私ができる任意のヘルプを取得するとよいでしょう。

Answer 1

jQuery .append()を使用すると、作成するために配列項目をリストに追加できます。

機能を別々にターゲットにする必要がありますが、menu[i]アイテムを文字列に変換すると、インラインで配置できるソリューションが含まれています。

// Generate an element, append index to referencing the executing function 
    $.each(menu, function(index, element) { 
    $('ul.navigation').append('<li data-index="'+index+'"><a href="#">'+element.title+'</a></li>'); 
    }); 

    // Run the executing function associated with item 
    $('ul.navigation > li').click(function() { 
    var item = $(this).attr('data-index'); 
    menu[item].onclick(); 
    }); 

    // This could be done easier like so: 
    // $.each(menu, function(index, element) { 
    // $('ul.navigation').append('<li data-index="'+index+'"><a href="#" onclick="'+element.onclick+'">'+element.title+'</a></li>'); 
    // }); 
    // but would require modifying the menu[i] items' functions to just be strings 

Here's an updated Fiddle.