动态添加选项到脚本

时间:2016-09-26 22:45:36

标签: javascript php jquery pagepiling.js

我正在使用PagePiling 在我的项目中,特别是添加菜单的选项。

根据文档,您只需添加html:

<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>

我如何更新js中的选项?

1 个答案:

答案 0 :(得分: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'
});