单击按钮 div 显示 1 by 1（一次单个）答案

【问题标题】：On click of button div display 1 by 1 (single at a time)单击按钮 div 显示 1 by 1（一次单个）
【发布时间】：2018-06-12 19:56:43
【问题描述】：

我有 10 个 <div> 同班。我希望页面加载时只有 2 个 div 可见，单击加载更多按钮后，下一个 div 应该显示。这样，在单击每个加载更多按钮后，应该显示下一个隐藏 div。

我已尝试使用以下代码但无法成功。

<script type="text/javascript">
    $( "#loadmore" ).click(function() {
        $(".design-derection").one( "div" ).show();
    });
    </script>

HTML结构是

<div class='content-block'>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class='design-derection'></div>
<div class="view-more" id="loadmore">
                <a href="javascript:void(0);">View More Ranges</a>
            </div>
</div>

【问题讨论】：

在小提琴中提供HTML和Js代码
jsfiddle.net/cse_tushar/6FzSb
codepen.io/elmahdim/pen/sGkvH
@AmiteshKumar 加载更多我只想显示单个 div
你可以操纵代码。现在检查我的答案

标签： javascript php jquery html css

【解决方案1】：

你可以这样做。

$( "#loadmore" ).click(function() {
    $(".design-derection:visible").last().next().show()
});

只需定位最后一个可见的 div，然后再显示下一个并显示它。

【讨论】：

所有div加载后如何隐藏加载更多按钮
@Narayan 你应该给自己写一个if 来检查$( "div:visible" ).last().next('div') 的长度是否大于0。如果它是0，你会隐藏它。
是的，谢谢滴水。我使用此代码隐藏了加载更多按钮if($(".design-derection > *").filter(":hidden").size()==0){ $("#loadMoreRanges").hide(); }

【解决方案2】：

Js fiddle demo

HTML

<ul id="myList">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
        <li>Eight</li>
        <li>Nine</li>
        <li>Ten</li>
        <li>Eleven</li>
        <li>Twelve</li>
        <li>Thirteen</li>
        <li>Fourteen</li>
        <li>Fifteen</li>
        <li>Sixteen</li>
        <li>Seventeen</li>
        <li>Eighteen</li>
        <li>Nineteen</li>
        <li>Twenty one</li>
        <li>Twenty two</li>
        <li>Twenty three</li>
        <li>Twenty four</li>
        <li>Twenty five</li>
    </ul>
    <div id="loadMore">Load more</div>
    <div id="showLess">Show less</div>

Javascript

$(document).ready(function () {
    size_li = $("#myList li").size();
    x=3;
    $('#myList li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+1 <= size_li) ? x+1 : size_li;
        $('#myList li:lt('+x+')').show();
    });
    $('#showLess').click(function () {
        x=(x-1<0) ? 1 : x-1;
        $('#myList li').not(':lt('+x+')').hide();
    });
});

CSS

 #myList li{ display:none;
    }
    #loadMore {
        color:green;
        cursor:pointer;
    }
    #loadMore:hover {
        color:black;
    }
    #showLess {
        color:red;
        cursor:pointer;
    }
    #showLess:hover {
        color:black;
    }

【讨论】：

【解决方案3】：

你可以这样做

$(document).ready(function () {
  size_li = $(".design-derection").size();
  x=2;
  $('.design-derection:lt('+x+')').show();
  $('#loadmore').click(function () {
    x= (x+1 <= size_li) ? x+1 : size_li;
    $('.design-derection:lt('+x+')').show();
 });

});

并添加了一行css

 .design-derection{ display:none;}

【讨论】：