Variable dynamique dans un plugin jquery

Version imprimable

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:

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

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:

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)
});

03/02/2011, 18h14
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:

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

Mais ca ne marche pas.

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

le voici il fonctionne :D

Code:

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:

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();