添加查看更多按钮
问题描述:
我有引导的SQLserver和PHP创建此节...添加查看更多按钮
有什么办法只显示一个小的,并给了查看更多按钮选项来显示整个结果?
有像10层甲板,我想e.g到sidplay只有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>
我试图把引导添加更多按钮,但显示在节结束,所有的内容都加载之后,是毫无意义的
答
下面的示例演示如何您可能看到其他隐藏的物品一次一个。您需要使用jQuery JavaScript库才能正常工作。
$('#viewmore').on('click', function(){
\t $('.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>
+0
是否有可能显示所有项目时点击查看更多,而不是一个一个地显示? – Maria
+1
是的,只需从事件处理程序选择器中移除'.first()'方法即可。 [更新了答案以反映这一点。] –
你为什么要使用一个for循环,而不是一个foreach循环?你的循环开始可以很容易地定义为'foreach($ decks as $ deck)',然后你可以调用例如'$ deck_name'将会是'$ deck ['name']''。 – GrumpyCrouton
您是否想要动态请求并加载每个套牌的更多内容,或者当单击“查看更多”时只显示前端的所有套牌? –
@SebCooper我真的不介意..我也不能管理。只是想使它工作..但可能请求是更困难的ajax,我不知道ajax,只是一点点的JavaScript – Maria