显示更多项目

Question

我正在构建一个显示各个位置的应用程序。

我想单击显示更多按钮一次显示10个位置。目前，我可以在第一时间显示10个项目，但第二次点击所有项目正在显示，而i want consecutive 10 items each time i click上显示更多按钮。

<?php 
    echo 
    "<script> 
    $('ul') 
    .find('li:gt(10)') 
    .hide() 
    .end() 
    .append(
    $('<li><a>Show More</a></li>').click(function(){ 
    $(this).siblings(':hidden').show().end().remove() 
    })); 
    </script>"; 
    ?> 

Answer 1

您一般有两种选择。部分HTML可能也有帮助。

1）只搜索十个隐藏的元素，你现在总是搜索10个元素（所以它们总是相同的）。提供的隐藏元素里，你可以这样做：

<?php 
echo 
"<script> 
$('ul') 
.find('li:hidden:gt(10)') 
.hide() 
.end() 
.append(
$('<li><a>Show More</a></li>').click(function(){ 
$(this).siblings(':hidden').show().end().remove() 
})); 
</script>"; 
?> 

2）存放的地方显示的项目的实际数目，每次加10的按钮，显示更多的点击。

<?php 
echo 
"<script> 
var itemsDisplayed = 10; 
$('ul') 
.find('li:gt(itemsDisplayed)') 
.hide() 
.end() 
.append(
$('<li><a>Show More</a></li>').click(function(){ 
itemsDisplayed = itemsDisplayed + 10; 
$(this).siblings(':hidden').show().end().remove() 
})); 
</script>"; 
?>