使用jquery加载更多内容的脚本

Question

我正在使用下面的脚本，但它不适用于我的脚本想要保留限制3盒以后，如果用户想要更多，他必须点击加载更多链接我给了一个活的链接，看到我想要加载更多的框或任何新的代码加载更多jsut给我？

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

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

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

我想这个工作，但我没能得到

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

直播网址：click here to see

Answer 1

在看一眼，我可以看到一对情侣在JS错误。 Javascript变量使用var语法创建，如var size_li = $("#myList li").size();或var x = 3。一旦创建完成，我们可以直接为它们赋值，如x = 4。

$(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(); 
    }); 
}); 

的#showMore和#showLess按钮需要添加到HTML触发点击功能还可以，但现在我们靶向.carousel-row检查行存在多少。