1

脚本：

<script>
    var currentPage = 1;

    function page(pg)
    {
        var els = document.getElementsByClassName("pagecontainer");
        for (var i = 0; i < els.length; i++)
        {
            var page_of_container = els[i].getAttribute("id");
            els[i].style.display = page_of_container  == pg ? 'block' : 'none';                    
        }

        currentPage = pg;
    }

    function prev()
    {
        if (currentPage <= 1) return;

        page(currentPage -1);
    }

    function next()
    {
        if (currentPage >= document.getElementsByClassName("pagecontainer").length) return;

        page(currentPage + 1);
    }
</script>

HTML：このHTMLのみを使用します。

<div id="1" class="pagecontainer" style="display: block;">
<a href="#">Contents goes here</a>
<a href="#">Contents goes here</a>
<a href="#">Contents goes here</a>
-
-
-
- 10 a elements
<p class="page"></p>
</div>

<div class="bottom">
    <a href="#" onclick="prev()">&lsaquo;</a>
    <a href="#" onclick="page('1')"></a>
    <a href="#" onclick="page('2')"></a>
    <a href="#" onclick="next()">&rsaquo;</a>
</div>

スクリプトから作成する必要があります：

<div id="2" class="pagecontainer" style="display: block;">
    <a href="#">Contents goes here</a>
    <a href="#">Contents goes here</a>
    <p class="page"></p>
    </div>

便利なリンクブロックに使用しているので、すべてのコンテンツがLINKSになり、スクリプトはdivs id = 1、id = 2、id = 3を作成することで静的コンテンツでうまく機能します。必要なのは、動的にすることです。たとえば、1つのdivを使用し、アンカーの数が10を超えたときに、スクリプトに次のdivを作成させます。

どうすればそれを達成できますか、事前に感謝します！

4

1 に答える 1

2

それぞれをループしanchorて配列に追加するだけで、ループ回数が 10 に達したら、新しい分周器を作成し、それに応じて割り当てます。

var container = [];

$('a[href]').each(function() {
    container.push($(this));

    var containerLength = container.length;

    if(containerLength  === 10 || !$(this).next().is('a[href]'))
    {
        var containingDivider = $('<div></div>');
        containingDivider.insertBefore(container[0]);

        for(i=0;i<containerLength;i++)
            container.shift().appendTo(containingDivider);

        container.length = 0;
    }
});

は!$(this).next().is('a[href]')、次の要素がプロパティを持つアンカーであることを保証しhrefます。そうでない場合は、アンカーの最後に到達したか、アンカーではない何かに到達したことを意味します。

これを使用したJSFiddle の例を次に示します。

于 2013-03-16T18:12:25.457 に答える