Question

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

Answer 1

你可以这样做。

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

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

Answer 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;
    }

Answer 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;}

点击按钮div显示1×1（一次一个）

3 个答案: