Question

我正在返回一个大型数组（产品），并且使用array_slice只获取前8个项目。

我将实现一个“查看更多”按钮，该按钮将为用户加载前端的剩余项目。

  <?php 
    $split_output = array_slice($_associatedProducts, 0, 8);       // returns set number of   products in array (8), for more button 
  ?>

我的问题是，如何在显示8之后返回数组中的其余项目？当用户点击“查看更多”时，将显示这些项目。

提前致谢！

Answer 1

不是使用array_slice，而是将数组的所有值输出到页面，但是从第九个值开始隐藏值（使用foreach循环和计数器变量可以轻松实现）。单击按钮，应用Javascript取消隐藏这些值：

<?php
$_associatedProducts = array(); // then add values to the array
$num = 0;
foreach($_associatedProducts as $prod){
    if(++$num <= 8){
    print("<div>$prod</div>");
    }
    else{
    print("<div class=\"more\" style=\"display:none;\">$prod</div>");
    }
}
?>
<button type="button" id="myButton">See More</button>
<script type="text/javascript">
document.getElementById("myButton").onclick = function(){
var divs = document.getElementsByClassName("more");
var len = divs.length;
    for(var i = 0; i < len; i++){
    divs[i].style.display = "block";
    }
this.style.display = "none";
}
</script>

Answer 2

你可以用你离开的地方的起点切片。第九项（偏移8）。如果您没有提供array_slice的长度，它将只返回所有剩余的项目。

$remaining_items = array_slice($_associatedProducts, 8);

如果您在用户点击链接后不想这样做，则有很多路由可以解决此问题。

使用JS异步获取数据
多个页面，第一页在查询中有LIMIT 0,8，查看更多页面没有。
只需将所有数据发送到页面，然后隐藏其余产品并使用按钮显示它们。
更多......

下面的示例只需将所有数据发送到页面，然后隐藏其余产品并使用按钮显示它们。

这也可以通过多种方式完成，这只是一个例子。

然后点击查看更多...您可以使用javascript显示剩余的项目。

这样你甚至不需要切片。

示例：

<强>的CSS：

.hide{ display:none; }

php / html

<ul id="productlist"> <?php $i=1; foreach($_associatedProducts as $product){ $hide = ($i++>8)?' class="hide"':''; echo "<li$hide>$product</li>"; } ?> </ul> <button id="seemore">See more..</button>

将生成：

<ul id="productlist"> <li>product 1</li> <li>product 2</li> <li>product 3</li> <li>product 4</li> <li>product 5</li> <li>product 6</li> <li>product 7</li> <li>product 8</li> <li class="hide">product 9</li> <li class="hide">product 10</li> </ul> <button>See more..</button>

现在添加jquery：

$('#seemore').on('click', function(){ $('#productlist>li.hide').removeClass('hide'); });

Answer 3

使用此功能获取其余项目：

$more_output = array_slice($_associatedProducts, 8);

然后将它们放在隐藏的div中：

<div class="moreProducts">
  Place your hidden Products here
</div>

风格：

.moreProducts {
  display: none;
}

HTML链接：

<a href="javascript:;" class="showMore">More Products</a>

jQuery的：

$('a.showMore').bind('click', function() {
  $('.moreProducts').show();
});

以上代码只是一个例子。你必须根据自己的需要改变它。

array_slice加载剩余的项目

3 个答案: