Question

我正在使用＆＃39;显示更多＆＃39;并且＆＃39;显示更少＆＃39;分页Please see this for live

我想隐藏或显示＆＃39;显示更少＆＃39;并且＆＃39;显示更多＆＃39;取决于盒子的数量。如果值大于3，我们应该显示＆＃39;显示更少＆＃39;如果值小于4，我们应该显示＆＃39;显示更多＆＃39;

这是我的剧本：

<script>
$(document).ready(function () {
    var size_li = $(".carousel-row").size();
    var x=3;            

    $('.carousel-row:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('.carousel-row:lt('+x+')').show();                
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('.carousel-row').not(':lt('+x+')').hide();                        
    });
});

</script>

然后我想要隐藏这些元素：

<div id="loadMore" class="loadMore">Load More</div>
        <div id="showLess" class="showLess">Show Less</div>

can you do for this  <div class="row carousel-row lss">
        <div class="col-xs-8 col-xs-offset-2 slide-row">
            <div id="carousel-1" class="carousel slide slide-carousel" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators lsse">
                <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-1" data-slide-to="1"></li>
                <li data-target="#carousel-1" data-slide-to="2"></li>
              </ol>

              <!-- Wrapper for slides -->
              <div class="carousel-inner">
                <div class="item active">
                    <img src="http://lorempixel.com/150/150?rand=1" alt="Image">
                </div>
                <div class="item">
                    <img src="http://lorempixel.com/150/150?rand=2" alt="Image">
                </div>
                <div class="item">
                    <img src="http://lorempixel.com/150/150?rand=3" alt="Image">
                </div>
              </div>
            </div>
            <div class="slide-content">
                <h4>Example product</h4>
                <p>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
                </p>
            </div>
            <div class="slide-footer">
                <span class="pull-right buttons">
                      <button class="btn btn-sm btn-info" onclick="relocateTo('jobtitle.html')"><i class="fa fa-fw fa-eye"></i>View Job</button>

                </span>
            </div>
        </div>
    </div>

问候

Answer 1

如果你想隐藏你列出的两个divs，你应该使用这个jQuery调用：

$('#loadMore').hide()
$('#showLess').hide()

为了使用您提供的逻辑执行此操作，您应该使用：

$(document).ready(function () {
    var size_li = $(".carousel-row").size();
    var x=3;            

    $('.carousel-row:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $('.carousel-row:lt('+x+')').show();                
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 3 : x-5;
        $('.carousel-row').not(':lt('+x+')').hide();                        
    });



  $('#showLess, #loadMore').click(function () {
    if($(".carousel-row:visible").size() > 3){
        $('#loadMore').hide();
        $('#showLess').show(); 
    }else{
        $('#showLess').hide();
        $('#loadMore').show();              
    }                       
 });
});

有关jQuery.hide（）的更多信息，请点击此链接：http://api.jquery.com/hide/

Answer 2

如果您希望显示/隐藏元素，jQuery .toggle()非常有用。此外，如果您希望选择一定数量的相似元素（按索引），.slice()可以派上用场。

示例：

[更新 - 基于OP编辑：]

/// Setup: // Get all .carousel-row elements more than 3 var rowsMoreThanThree = $('.carousel-row').slice(3), rows = $('.carousel-row'), loadMore = $('#loadMore'), showLess = $('#showLess'); // show or hide more and less buttons based on number of boxes: if (rows.length > 3) { loadMore.hide(); } else{ showLess.hide(); } // Toggle! $('.toggler').click(function(){ rowsMoreThanThree.toggle('slow'); $('.toggler').toggle('slow'); });

div { padding: 20px; border: dashed 2px steelblue; background-color: #ffffff; } .searchContainer, #globalSearchInput { background-color: pink; } .black{ background-color: #000000; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="carousel-row">Row 1</div> <div class="carousel-row">Row 2</div> <div class="carousel-row">Row 3</div> <div class="carousel-row">Row 4</div> <div class="carousel-row">Row 5</div> <div class="carousel-row">Row 6</div> <button class="toggler" id="loadMore">Load More</button> <button class="toggler" id="showLess">Show Less</button>

如何使用jQuery或JavaScript隐藏/显示元素

2 个答案: