查看更多/更少按钮，在一排

HEJ家伙每6本书后物品货架的书架和自动调节的无序列表，查看更多/更少按钮，在一排

我工作的书架箱，采用自举3.0，我有这样的事情，到目前为止，

http://www.bootply.com/19NyAgMDED

在这里，我已经硬编码了书架，在它的一些书籍，在一排，每6本书，但我想每6本书后自动已下架连续的原因是，在我的下一步中，我将通过Rest/json数据加载这些书籍。所以我想加载书籍，就像他们现在一样，

也作为一个开始，页面加载后，我想只显示6本书，按下按下查看更多按钮我想显示剩余和查看较少按钮仅显示少于或等于6本书。

任何形式的帮助大大appriciated，

由于提前，

来源

2014-09-27 Sr070960

一个建议是写在JavaScript端有条件的逻辑来检查的图书数量，如果发现图书的数量要多比6分开处理。在CSS中创建单独的类并将它们附加到使它们看起来像一个架子的元素。

谢谢

来源

2014-09-27 19:50:57

我在代码本身发表了评论。我没有材料来测试它，所以请告诉我这是否适合您。当然，您必须更改请求URL和变量。

$.ajax({ 
    url: "https://your/json/source", 
    type: "GET", 
    dataType: "json", 
    success: function (data) { 
     var booksHTML = ""; 
     // The loop 
     for (var i = 0; i < data.books.length; i++) { 
      // Make sure the book exists in json 
      if (typeof data.books[i] !== "undefined") { 
       // Get vars for book data such as url, img src and title 
       var url = data.books[i].url, 
        image = data.books[i].img.src, 
        title = data.books[i].title; 
       // Generate relevant HTML for a single book 
       booksHTML += '<div class="col-xs-4 col-md-2">'; 
       booksHTML += '<a href="' + url + '" title="' + title + '" target="_blank"><img src="' + image + '" alt="' + title + '" class="img-responsive book"/></a>'; 
       booksHTML += '</div>'; 

       // If, in the loop, this is the third book or something that is a multitude of 3 
       // but not a multitude of 6, we add the hidden shelf 
       // ELSE if, in the loop, it's the sixth book or a multitude of 6 
       // we add a shelf, without the hidden class. This could be written a little shorter, but this 
       // is the clearest. 
       if (((i + 1) % 3 === 0) && ((i + 1) % 6 !== 0)) { 
        booksHTML += '<div class="col-xs-12 shelf hidden-md hidden-lg"></div>'; 
       } else if (((i + 1) % 6 === 0)) { 
        booksHTML += '<div class="col-xs-12 shelf"></div>'; 
       } 
      } 
     } 
     // END the loop 

     // Append generated HTML to a container 
     $(".container .row").append(booksHTML); 
    } 
});

在this fiddle中更好的可读性。让我知道这是否有效，然后我可以添加“查看更多”按钮。

来源

2014-09-27 20:26:59

HEJ，谢谢，工程就像一个魅力，真棒 – Sr070960 2014-09-28 15:16:13

我真的如果并欣赏你可以用按钮也帮助 – Sr070960 2014-09-28 17:11:41

如果通过分组图书进行启动，角度可以使用嵌套NG-重复建设布局：

function getRows(array, columns) { 
    var rows = []; 

    //http://stackoverflow.com/questions/8495687/split-array-into-chunks 
    var i, j, temparray, chunk = columns; 
    for (i = 0, j = array.length; i < j; i += chunk) { 
    temparray = array.slice(i, i + chunk); 

    rows.push(temparray); 
    } 

    return rows; 
}

然后你的HTML可以简单地是：

<div class="container"> 
    <div ng-repeat="row in rows" ng-show="$index==1 || show.more==true"> 
    <div ng-repeat="book in row" class="col-xs-4 col-md-2"> 
     <a href=""> 
     <img ng-src="{{book.url}}" class="img-responsive book" /> 
     </a> 
    </div> 
    <div class="col-xs-12 shelf"></div> 
    </div> 
</div> 
<button ng-click="show.more = true;" ng-show="show.more == false">Show More</button> 
<button ng-click="show.more = false;" ng-show="show.more == true">Show Less</button>

注意两个按钮切换show.more，这是控制书籍行可见性的变量。

这里是一个工作演示：http://embed.plnkr.co/uY9Yx57frTpXoCDIm65L/preview

来源

2014-10-15 22:32:37

查看更多/更少按钮，在一排

回答

相关问题