1. 首頁
  2. 問答
  3. 用jQuery點擊按鈕後每載入6張圖片

用jQuery點擊按鈕後每載入6張圖片

2016-07-22 75 views
0

我想用僅jQuery（無Ajax）爲我的網站添加一個加載更多按鈕。我的HTML圖像部分結構是與一些插件（如lightbox）混合的元素列表。用jQuery點擊按鈕後每載入6張圖片

我試過很多jQuery的招數連這個小提琴，但沒有機會：

http://jsfiddle.net/cse_tushar/6FzSb/

這裏是我的圖片代碼與負載更多按鈕：

<!DOCTYPE html> 
 
<head> 
 
    <title></title> 
 
</head> 
 
<body> 
 
    
 
    <ul id="portfolio-container" class="portfolio-container real-gapped colored-mask masonry clearlist row portfolio-hover-effect"> 
 

 
    <li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12"> 
 
     <div class="portfolio-item-img"> 
 
     <img src="http://placehold.it/400x260" alt="portfolio" /> 
 
     </div> 
 
     <div class="portfolio-item-info font-second"> 
 
      <h3 class="portfolio-item-title">sweet nicky</h3> 
 
      <div class="portfolio-item-detail"> 
 
      <p>apiente accusantium fugiat</p> 
 
      <!-- LightBox Button --> 
 
      <a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a> 
 
      <!--/ End LightBox Button --> 
 
      </div> 
 
     </div> 
 
    </li> 
 
     
 
    <li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12"> 
 
     <div class="portfolio-item-img"> 
 
     <img src="http://placehold.it/400x260" alt="portfolio" /> 
 
     </div> 
 
     <div class="portfolio-item-info font-second"> 
 
      <h3 class="portfolio-item-title">sweet nicky</h3> 
 
      <div class="portfolio-item-detail"> 
 
      <p>apiente accusantium fugiat</p> 
 
      <!-- LightBox Button --> 
 
      <a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a> 
 
      <!--/ End LightBox Button --> 
 
      </div> 
 
     </div> 
 
    </li> 
 
     
 
    <li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12"> 
 
     <div class="portfolio-item-img"> 
 
     <img src="http://placehold.it/400x260" alt="portfolio" /> 
 
     </div> 
 
     <div class="portfolio-item-info font-second"> 
 
      <h3 class="portfolio-item-title">sweet nicky</h3> 
 
      <div class="portfolio-item-detail"> 
 
      <p>apiente accusantium fugiat</p> 
 
      <!-- LightBox Button --> 
 
      <a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a> 
 
      <!--/ End LightBox Button --> 
 
      </div> 
 
     </div> 
 
    </li> 
 
     
 
    <li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12"> 
 
     <div class="portfolio-item-img"> 
 
     <img src="http://placehold.it/400x260" alt="portfolio" /> 
 
     </div> 
 
     <div class="portfolio-item-info font-second"> 
 
      <h3 class="portfolio-item-title">sweet nicky</h3> 
 
      <div class="portfolio-item-detail"> 
 
      <p>apiente accusantium fugiat</p> 
 
      <!-- LightBox Button --> 
 
      <a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a> 
 
      <!--/ End LightBox Button --> 
 
      </div> 
 
     </div> 
 
    </li> 
 
     
 
    <li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12"> 
 
     <div class="portfolio-item-img"> 
 
     <img src="http://placehold.it/400x260" alt="portfolio" /> 
 
     </div> 
 
     <div class="portfolio-item-info font-second"> 
 
      <h3 class="portfolio-item-title">sweet nicky</h3> 
 
      <div class="portfolio-item-detail"> 
 
      <p>apiente accusantium fugiat</p> 
 
      <!-- LightBox Button --> 
 
      <a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a> 
 
      <!--/ End LightBox Button --> 
 
      </div> 
 
     </div> 
 
    </li> 
 
     
 
    <li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12"> 
 
     <div class="portfolio-item-img"> 
 
     <img src="http://placehold.it/400x260" alt="portfolio" /> 
 
     </div> 
 
     <div class="portfolio-item-info font-second"> 
 
      <h3 class="portfolio-item-title">sweet nicky</h3> 
 
      <div class="portfolio-item-detail"> 
 
      <p>apiente accusantium fugiat</p> 
 
      <!-- LightBox Button --> 
 
      <a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a> 
 
      <!--/ End LightBox Button --> 
 
      </div> 
 
     </div> 
 
    </li> 
 
     
 
    <li class="portfolio-item photo col-sm-6 col-md-4 col-xs-12"> 
 
     <div class="portfolio-item-img"> 
 
     <img src="http://placehold.it/400x260" alt="portfolio" /> 
 
     </div> 
 
     <div class="portfolio-item-info font-second"> 
 
      <h3 class="portfolio-item-title">sweet nicky</h3> 
 
      <div class="portfolio-item-detail"> 
 
      <p>apiente accusantium fugiat</p> 
 
      <!-- LightBox Button --> 
 
      <a href="https://vimeo.com/31240369" title="Image description" class="icon-magnifying-glass lightbox" data-lightbox-gallery="gallery1"></a> 
 
      <!--/ End LightBox Button --> 
 
      </div> 
 
     </div> 
 
    </li> 
 

 
    </ul> 
 
    
 
<div class="small-section text-center"> 
 
    <a href="#" id="loadMore" class="btn btn-animated btn-split btn-dark ripple-alone" data-text="Load more"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Load more&nbsp;..&nbsp;&nbsp;&nbsp;&nbsp;</span></a> 
 
</div> 
 
    
 

 
</body> 
 
</html>

請任何幫助！

來源

2016-07-22 Assim

回答

0

我假設你知道其他圖像的網址。如果你在一個數組有他們，你可能會做一些概念上是這樣的：

var moreImages = [ 
 
    "http://lorempixel.com/72/72/", 
 
    "http://lorempixel.com/72/72/", 
 
    "http://lorempixel.com/72/72/", 
 
    "http://lorempixel.com/72/72/", 
 
    "http://lorempixel.com/72/72/", 
 
    "http://lorempixel.com/72/72/", 
 
    "http://lorempixel.com/72/72/" 
 
]; 
 

 
$("#more").on("click", function(){ 
 
    if (moreImages.length === 0) { return; } 
 
    var target = $("#imageContainer"); 
 

 
    moreImages.splice(0,3).forEach(function(item){ 
 
    target.append("<li><img src=\"" + item + "\" /></li>"); 
 
    }); 
 
});
<ul id="imageContainer"> 
 
    <li><img src="http://lorempixel.com/72/72/" /></li> 
 
    <li><img src="http://lorempixel.com/72/72/" /></li> 
 
    <li><img src="http://lorempixel.com/72/72/" /></li> 
 
</ul> 
 

 
<button id="more">more</button> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

來源

2016-07-22 01:01:00 JonSG

相關問題

 相關問題