Discussion :

[rorschach1]

Bonjour à tous,

Je débute dans le développement jQuery et j'essai de réaliser un script qui permet de cacher les éléments li d'une liste au delà de 3 item.

en gros ça doit donner cela

première liste

• item11
• item12
• item13

+ d'item

deuxième liste

• item21
• item22
• item23

+ d'item

j'ai donc fait ce script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
	(function($){
		$.fn.maskList = function(){
 
			var nbItem = $(this).children().size();
			var visible = false;
			var showclass = 'moreInfosDown';
			var hideclass = 'moreInfosUp';
 
			if (nbItem >= 3) {		
				// Si il y a plus de 3 item j'ajoute un lien et je cache les item superieur à 3
				$(this).after('<p class="moreInfos"><a href="#" class="'+showclass+'">More news</a></p>');
				$(this).children('li:gt(2)').hide();
 
				$('.moreInfos').live("click",function(event){
					event.preventDefault();
					visible = !visible;
 
					if (visible == true) {
						$(this).prev().children().show('fast');
					}
					else {
						$(this).prev().children('li:gt(2)').hide('fast');
					}
				});
			}
			return $(this);
		};
	})(jQuery)
 
	$("#listNewsFooter").maskList();
	$("#liste2").maskList();

Mon script doit s'appliquer sur différentes listes mais j'ai un problème sur la variable visible qui n'est pas propre à chaque instance. Si j'agis sur la première liste et que ma variable visible prend false et que j'agis sur ma deuxième liste alors ma variable démarre à false et non true. Bref je sais pas comment faire pour qu'elle soit propre à chaque instance.

Merci

[Arnaud F.]

Bonjour,

plutôt que d'utiliser une variable pour tester la visibilité, je rajouterai directement la visibilité de l'élément en question dans une méta donnée ($.data).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('.moreInfos').live("click",function(event){
	event.preventDefault();
 
	var visible = false;
 
	if($(this).data("isVisible") !== undefined)
	{
		visible = $(this).data("isVisible");
	}
 
	if (visible == true) {
		$(this).prev().children().show('fast');
	}
	else {
		$(this).prev().children('li:gt(2)').hide('fast');
	}
 
	$(this).data("isVisible", !visible)
});

[rorschach1]

Ok merci cela fonctionne bien.

Je me rend compte que j'ai un deuxième problème du coup. Comme j'appelle .moreInfos que se trouve dans les deux listes mon script s'exécute deux fois.

J'ai essayé d'appeler l'élément comme cela

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).next().live("click",function(event){

Mais ca ne marche pas.

[rorschach1]

YOoo j'ai réussi à corriger mon script.

le voici il fonctionne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<ul id="listNewsFooter">
<li><a href="#">item11</a><li>
<li><a href="#">item12</a><li>
<li><a href="#">item13</a><li>
<li><a href="#">item14</a><li>
<li><a href="#">item15</a><li>
<li><a href="#">item16</a><li>
<li><a href="#">item17</a><li>
</ul>
 
<ul id="liste2">
<li><a href="#">item21</a><li>
<li><a href="#">item22</a><li>
<li><a href="#">item23</a><li>
<li><a href="#">item24</a><li>
<li><a href="#">item25</a><li>
<li><a href="#">item26</a><li>
<li><a href="#">item27</a><li>
</ul>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
(function($){
	$.fn.maskList = function(){
 
		var nbItem = $(this).children().size();
		var visible = false;
 
		if (nbItem >= 3) {		
			// Si il y a plus de 3 item j'ajoute un lien et je cache les item superieur à 3
			$(this).after('<p class="moreInfos"><a href="#" class="moreInfosDown">More news</a></p>');
			$(this).children('li:gt(2)').hide();
 
			$(this).next(".moreInfos").click(function(event) {
				event.preventDefault();
				visible = !visible;
 
				if (visible == true) {
					$(this).prev().children().show('fast');
					$(this).children("a").removeClass().addClass("moreInfosUp");
				}
				else {
					$(this).prev().children('li:gt(2)').hide('fast');
					$(this).children("a").removeClass().addClass("moreInfosDown");
				}
 
			});
		}
		return $(this);
	};
})(jQuery)
 
// appel des listes
$("#listNewsFooter").maskList();
$("#liste2").maskList();