jQuery załaduj pierwsze 3 elementy, kliknij "Wczytaj więcej", aby wyświetlić następne 5 elementów
Mam nieuporządkowaną listę:
<ul id="myList"></ul>
<div id="loadMore">Load more</div>
Chcę wypełnić tę listę elementami listy z innego pliku HTML:
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
<li>Thirteen</li>
<li>Fourteen</li>
<li>Fifteen</li>
Chcę załadować pierwsze 3 pozycje listy, a następnie pokazać następne 5 pozycji, gdy użytkownik kliknie div "load more":
$(document).ready(function () {
// Load the first 3 list items from another HTML file
//$('#myList').load('externalList.html li:lt(3)');
$('#myList li:lt(3)').show();
$('#loadMore').click(function () {
$('#myList li:lt(10)').show();
});
$('#showLess').click(function () {
$('#myList li').not(':lt(3)').hide();
});
});
Potrzebuję jednak pomocy, ponieważ chciałbym, aby "Wczytaj więcej" pokazało następne 5 pozycji listy, ale jeśli jest więcej pozycji listy w pliku HTML, ponownie wyświetlić div "Wczytaj więcej" i umożliwić użytkownikom wyświetlanie kolejnych 5 pozycji, powtarzając to dopóki nie zostanie wyświetlona cała lista.
Jak mogę to najlepiej osiągnąć?
Stworzyłem następujący jsfiddle: http://jsfiddle.net/nFd7C/
2 answers
Demo robocze: http://jsfiddle.net/cse_tushar/6FzSb/
$(document).ready(function () {
size_li = $("#myList li").size();
x=3;
$('#myList li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+5 : size_li;
$('#myList li:lt('+x+')').show();
});
$('#showLess').click(function () {
x=(x-5<0) ? 3 : x-5;
$('#myList li').not(':lt('+x+')').hide();
});
});
Nowy JS aby pokazać lub ukryć load more and show less
$(document).ready(function () {
size_li = $("#myList li").size();
x=3;
$('#myList li:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+5 <= size_li) ? x+5 : size_li;
$('#myList li:lt('+x+')').show();
$('#showLess').show();
if(x == size_li){
$('#loadMore').hide();
}
});
$('#showLess').click(function () {
x=(x-5<0) ? 3 : x-5;
$('#myList li').not(':lt('+x+')').hide();
$('#loadMore').show();
$('#showLess').show();
if(x == 3){
$('#showLess').hide();
}
});
});
CSS
#showLess {
color:red;
cursor:pointer;
display:none;
}
Demo robocze: http://jsfiddle.net/cse_tushar/6FzSb/2/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-25 17:47:24
Proste i z niewielkimi zmianami. A także ukryć ładować więcej, gdy cała lista jest ładowana.
JsFiddle tutaj .
$(document).ready(function () {
// Load the first 3 list items from another HTML file
//$('#myList').load('externalList.html li:lt(3)');
$('#myList li:lt(3)').show();
$('#showLess').hide();
var items = 25;
var shown = 3;
$('#loadMore').click(function () {
$('#showLess').show();
shown = $('#myList li:visible').size()+5;
if(shown< items) {$('#myList li:lt('+shown+')').show();}
else {$('#myList li:lt('+items+')').show();
$('#loadMore').hide();
}
});
$('#showLess').click(function () {
$('#myList li').not(':lt(3)').hide();
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-19 02:57:20