Question

在我的页面上显示加载否的视频。没有限制。在一行4视频显示。现在我想只显示两行。其余行将显示在按钮单击

上

显示视频数据时，这是我的div

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

Answer 1

我不知道你是否在寻找js / jquery解决方案，因为我可以看到jquery标签我建议你使用jQuery解决方案：

首先，我想清楚你为每个循环都有一个php，它会一次又一次地生成相同的ID。这是div：

<div class="col-sm-6 col-md-3 col-lg-3 photography app" id="load_data">

您可以通过向其添加一些索引来删除id属性或使其动态化。所以你能做的是：

在CSS中：

.lightbox.row{
  display: none;
}
.lightbox.row:nth-child(1),
.lightbox.row:nth-child(2) {
  display: block;
}

使用上面的css隐藏所有容器div，但是第一个和第二个。

现在在jQuery中你可以这样做：

$('#showAll').on('click', function(e){
     e.preventDefault();
     $('.lightbox.row').filter(':hidden').show();
});

另一个建议是从row中删除ID并将其放入classlist：

<div class="lightbox row filteredVideoContent">

也是这个：

<div class="col-sm-6 col-md-3 col-lg-3 photography app load_data">

显示限制编号。页面加载视频

1 个答案: