添加查看更多按钮答案

【问题标题】：Add view more button添加查看更多按钮
【发布时间】：2017-09-05 12:43:59
【问题描述】：

我有这个部分是由引导 SQLserver 和 php 创建的...

有什么方法可以只显示其中的一小部分，并为视图提供更多按钮选项以显示整个结果？

大概有 10 个牌组，我想只播放 2 个牌组，然后当用户单击查看更多以显示所有牌组时。

这是该结果的我的 php 代码。

<div class="vertical-wrapper">
<?php 
for($i=0;$i<count($decks);$i++){
   $deck_name = $decks[$i]['name'];
   $deck_desc = $decks[$i]['description'];                                        
   $deck_img_link = $json['deckplans'][$i]['images'][0]['href'];
  echo "<img class='bd-imagelink-157 bd-own-margins bd-imagestyles' src='$deck_img_link'><p class='bd-textblock-779 bd-content-element'>$deck_name</p>";
   echo $deck_desc;
 }
?>
</div>

我试图把引导添加更多按钮，但显示在该部分的末尾，在所有内容加载后，没有意义

【问题讨论】：

你为什么使用 for 循环而不是 foreach 循环？您的循环开始可以很容易地定义为foreach($decks as $deck)，然后您可以调用例如$deck_name 将是$deck['name']。
您是要动态请求并加载每个卡片组的更多内容，还是在单击View More 时在前端显示所有卡片组？
@SebCooper 我真的不介意.. 我也无法管理。只是想让它工作..但可能使用 ajax 请求更困难，我不知道 ajax，只是对 JavaScript 有一点了解

标签： javascript php twitter-bootstrap

【解决方案1】：

以下示例演示了如何一次显示一个附加隐藏项。您需要使用 jQuery JavaScript 库才能使其工作。

$('#viewmore').on('click', function(){
	$('.item:hidden').show();
})

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
ITEM 1
</div>
<div class="item hidden">
ITEM 2
</div>
<div class="item hidden">
ITEM 3
</div>
<div class="item hidden">
ITEM 4
</div>
<button id="viewmore">
View More
</button>
</button>

【讨论】：

点击查看更多时是否可以显示所有项目而不是一个一个显示？
是的，只需从事件处理程序选择器中删除 .first() 方法即可。 [更新了答案以反映这一点。]