jquery slice限制5列出每个选项卡

Question

我有标签。每个选项卡都包含一个列表。当我单击“加载更多”时，它将显示隐藏的列表。但是当我切换到另一个选项卡时，它已经显示了列表。我的极限5。

这里是代码：

$('.category').each(function() {
    $(".article").slice(0, 5).show();
    var id = $(this).data('articleshow-id');
    $('#'+id+' .LoadMore').on('click', function (e) {
        e.preventDefault();
        $(".article:hidden").slice(0, 20).slideDown();
        if ($(".category .article:hidden").length == 0) {
           $('#'+id+' .LoadMore').hide();
                }
            });
        });



<div class="article-display active" id="articleshow-$ID">
    <div class="article inlineBlock-parent top-align">
        <div class="nimg-holder">
            <div class="bg frame__background full size--cover" style="background-image: url('$ArticleCover.URL');"></div>
                                </div
                                ><div class="article-content frame__desc">
                                    <p class="title">$Title</p>
                                    <p class="date">$Date.Format("d M Y")</p>
                                    <div class="desc">

                                    </div>
                                    <div class="btn inlineBlock-parent">
                                        <a class="btn-modal" href="$Link">
                                            <p>Read more</p><i class="ion-ios-arrow"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <% end_loop %>
                            <div class="inlineBlock-parent center-align">
                                <a class="LoadMore">Load More</a><a class="totop">Back to top</a>
                            </div>
                            </div>

Answer 1

它已经可见，因为您正在使用一个类名，当您单击“加载更多”按钮时，它会向下滑动所有.LoadMore。

一个简单的解决方法是，每次单击新类别时，都将隐藏.LoadMore div。

将其附加到函数的末尾：

.on( 'click', function () {
    $( '.LoadMore' ).hide()
} )

上面的脚本基本上说，当您单击.category时，请隐藏类为.LoadMore的任何对象>

所以完整的代码如下：

$( '.category' ).each( function () {
    $( ".article" ).slice( 0, 5 ).show()
    var id = $( this ).data( 'articleshow-id' )
    $( '#' + id + ' .LoadMore' ).on( 'click', function ( e ) {
        e.preventDefault()
        $( ".article:hidden" ).slice( 0, 20 ).slideDown()
        if ( $( ".category .article:hidden" ).length == 0 ) {
            $( '#' + id + ' .LoadMore' ).hide()
        }
    } )
} ).on( 'click', function () {
    $( '.LoadMore' ).hide()
} )