javascript - 单击按钮时突出显示第 n 个子隐藏内容使用 jquery

Question

PHP

<div id="lightbox" class="row filteredVideoContent">
    <?php
         foreach ( $aVideo as $oVideo ){?>
    <div class="col-sm-6 col-md-3 col-lg-3 photography app" id="load_data">
        <div class="portfolio-item">
            <!-- <div class="hover-bg"> -->
            <div class="">
                <a href="#video_container" data-backdrop="static" class="video_thumb" data-toggle="modal" data-videopath="<?php echo $oVideo['videoPath']; ?>" data-videosubject="<?php echo $oVideo['videoSubject']; ?>">
                    <div class="hover-text" data-toggle="tooltip" data-placement="right" title="<?php echo $oVideo[ 'videoSubject' ];?>">
                        <h4> <?php echo substr($oVideo[ 'videoSubject' ],0,20); ?> </h4>
                    </div>
                    <?php
                  if( ! empty( $oVideo[ 'videoThumb' ] ) )
                  {
                   $thumbName = $oVideo[ 'videoThumb' ];
                  }
                  else
                  {
                   $thumbName = "assets/video/common.jpg";
                  }
                 ?>
                    <img style="height:188px;width : 263px"
                         src="<?php echo base_url () . $thumbName ?>" class="videoThumb img-responsive"
                         alt="<?php echo $oVideo[ 'videoSubject' ];?>">
                        </a>
                    </div>

                <div>Uploaded By : <span data-toggle="tooltip" data-placement="right" title="<?php echo $oVideo[ 'userName' ];?>"> <?php echo substr($oVideo[ 'userName' ],0,20);?> </span></div>
                <div>HQ : <span data-toggle="tooltip" data-placement="right" title="<?php echo @$oVideo[ 'hq' ];?>">  <?php echo substr(@$oVideo[ 'hq' ],0,20);?> </span></div>
                <div>Subject : <span data-toggle="tooltip" data-placement="right" title="<?php echo $oVideo[ 'videoSubject' ];?>">  <?php echo substr($oVideo[ 'videoSubject' ],0,20);?> </span></div>
            </div>
        </div>
        <?php
            }
           ?>
    </div>
    <?php if(count($aVideo) > 8){ ?>
    <p class="dash">&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;
        &nbsp;<button id="showAll" class="btn tf-btn btn-default" style="float:none;">Load More</button>&nbsp;
        &#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;&#x2015;</p>
    <?php } ?> 
</div>

jQuery

$('#showAll').on('click', function(e){
    e.preventDefault();
    $('.filteredVideoContent .app').filter(':hidden').show();
    $('#showAll').hide();
    $('.dash').hide();
    });
$('#videoSearchInput').on('keyup',function(e){  
    e.preventDefault();
    $('#showAll').show();
     $('.dash').show();
    });
});

CSS

.filteredVideoContent .app{
  display: none;
}
.filteredVideoContent .app:nth-child(1),
.filteredVideoContent .app:nth-child(2),
.filteredVideoContent .app:nth-child(3),
.filteredVideoContent .app:nth-child(4),
.filteredVideoContent .app:nth-child(5),
.filteredVideoContent .app:nth-child(6),
.filteredVideoContent .app:nth-child(7),
.filteredVideoContent .app:nth-child(8) {
  display: block;
}
p { letter-spacing: 1px;}
p button { letter-spacing: 1px; margin: 0 5px; }

现在，当我单击“加载更多”按钮时，会显示隐藏数据。但是，当我单击该按钮时，我想直接滚动到隐藏的新数据或显示数据上方自动向下滚动到单击按钮时出现的新数据。

Answer 1

试试这个。您只需要获取要显示的第一个 div 并将文档滚动到该元素的位置。

$('#showAll').on('click', function(e){
    e.preventDefault();
    $scrollToElement = $('.filteredVideoContent .app:hidden').first();
    $('.filteredVideoContent .app').filter(':hidden').show();
    $('#showAll').hide();
    $('.dash').hide();
    $('html, body').animate({
        'scrollTop' : $scrollToElement.position().top
    });
});