2016-09-26 4 views
1

私のプロジェクトでは、PagePiling 、特にメニューを追加するオプションを使用しています。スクリプトにオプションを動的に追加する

<ul id="myMenu"> 
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li> 
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li> 
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li> 
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li> 
</ul> 

とJS内:

$('#pagepiling').pagepiling({ 
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'], 
    menu: '#myMenu' 
}); 

はしかし、私は、例えば、動的メニュー要素を追加したい:

<ul id="myMenu"> 
    while ($loop->have_posts()) : $loop->the_post(); ?> 
     <li data-menuanchor="<?php sanitize_title(the_title()); ?>"><a href="#<?php sanitize_title(the_title()); ?>"><?php the_title(); ?></a></li> 
    <?php endwhile; ?> 
</ul> 
をあなたは、単にHTMLを追加することができますドキュメント毎の

jsのオプションも更新するにはどうすればよいですか?

+0

文字列を配列に追加し、それをあなたのjsに 'implode'しますか? – Blake

+0

多分あなたの質問は "動的にセクションを追加する"べきでしょうか? メニューに問題はありません...問題は、新しいセクションにアンカーを動的に割り当てることです。 – Alvaro

答えて

0

私はあなたがJSによってmenuanchor配列を得ることができると思います。

var myAnchors = []; 

$("#myMenu li").each(function(index) { 
    myAnchors.push($(this).attr("data-menuanchor")); 
}); 

console.log(myAnchors); 

$('#pagepiling').pagepiling({ 
    anchors: myAnchors, 
    menu: '#myMenu' 
}); 
関連する問題