如何隱藏/顯示元素使用jQuery或JavaScript

Question

我使用「顯示更多」和「顯示更少」分頁Please see this for live

我想隱藏或顯示「顯示更少」，並根據「顯示更多」箱數。如果數值大於3，我們應該顯示「顯示更少」，如果該值小於4，我們應該顯示「顯示更多」

這裏是我的腳本：

<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

如果要隱藏你上市，你應該使用這個jQuery的調用兩個divs：

$('#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（）檢查此鏈接：​​

Answer 2

如果」重新展示/隱藏元素，jQuery .toggle()是相當有幫助的。此外，如果您想要選擇一定數量的相似元素（按索引），.slice()可以非常方便。

• slice() docs
• toggle() docs

實施例：

[更新 - 基於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>