J'ai une liste non ordonnée:
<ul id="myList"></ul>
<div id="loadMore">Load more</div>
Je souhaite remplir cette liste avec des éléments de liste d'un autre fichier 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>
Je souhaite charger les 3 premiers éléments de la liste, puis afficher les 5 éléments suivants lorsque l'utilisateur clique sur la division "charger plus":
$(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();
});
});
J'ai besoin d'aide cependant, car j'aimerais que le "charger plus" affiche les 5 éléments de liste suivants, mais s'il y a plus d'éléments de liste dans le fichier HTML, pour afficher à nouveau le div "charger plus" et permettre aux utilisateurs d'afficher le suivant 5 éléments, en répétant jusqu'à ce que la liste entière soit affichée.
Comment puis-je au mieux y parvenir?
J'ai créé le jsfiddle suivant: http://jsfiddle.net/nFd7C/
AVERTISSEMENT: size()
a été déconseillé dans jQuery 1.8 et supprimé dans jQuery 3.0, utilisez .length
à la place
Démonstration de travail: 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();
});
});
$(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;
}
Démonstration de travail: http://jsfiddle.net/cse_tushar/6FzSb/2/
Simple et avec peu de changements. Et aussi masquer charger plus lorsque la liste entière est chargée.
jsFiddle ici .
$(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();
});
});
L'expression $ (document) .ready (function () déconseillée dans jQuery3.
Voir violon de travail avec jQuery 3 ici
Tenez compte du fait que je n'ai pas inclus le bouton Showless.
Voici le code:
[~ # ~] js [~ # ~]
$(function () {
x=3;
$('#myList li').slice(0, 3).show();
$('#loadMore').on('click', function (e) {
e.preventDefault();
x = x+5;
$('#myList li').slice(0, x).slideDown();
});
});
[~ # ~] css [~ # ~]
#myList li{display:none;
}
#loadMore {
color:green;
cursor:pointer;
}
#loadMore:hover {
color:black;
}