Discussion :

[FixSan]

Bonjour,

Pour les besoins du blog dont je m'occupe, je cherche à afficher ou masquer le contenu des commentaires à la demande, par un clic sur une image.

J'ajoute cette image via javaScript ; ainsi, si celui-ci est désactivé, le visiteur ne verra pas d'image inutile (impossible à cliquer).

Le résultat est visible sur cette page.

Voici le code javaScript que j'utilise :

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
$(document).ready( function () {
	document.documentElement.className += ' js';
	$("#lastcomments > li").image(
		"http://sxjpl.free.fr/dotclear-files/themes/biblio/img/plus.png",
		function () {
			$(this).click( function () {
				$(this).nextAll(".toggle").first().toggle("slow");
				if ($(this).hasClass('expand')) {
					$(this).removeClass('expand');
					$(this).alt="masquer le commentaire";
					$(this).attr("src", "http://sxjpl.free.fr/dotclear-files/themes/biblio/img/plus.png");
				} else {
					$(this).addClass('expand');
					$(this).alt="devoiler le commentaire";
					$(this).attr("src", "http://sxjpl.free.fr/dotclear-files/themes/biblio/img/minus.png");
				}
			});
		}
	);
});
 
$.fn.image = function (src, f) {
	return this.each(function () {
		$("<img />").appendTo(this).each( function () {
			this.src = src;
			this.onload = f;
		});
	});
}

J'ai deux problèmes avec ce code :
1. il faut cliquer DEUX fois au lieu d'une sur l'image "plus" pour qu'elle se change en "moins", et inversement !
2. Le contenu du commentaire n'est pas affiché quand on clique. Il y a donc un problème avec le $(this).nextAll(".toggle"), qui ne pointe pas correctement vers le contenu du commentaire. J'ai essayé $(this).parent().nextAll(".toggle") sans plus de succès, et je suis à court d'idées !

Toute aide serait grandement appréciée. Un grand merci d'avance !

[FixSan]

Mon point 2 est résolu ! Ça ne pouvait pas fonctionner, car l'image était ajoutée À LA FIN du contenu de <li>, c'est-à-dire APRÈS le commentaire. Il fallait donc mettre :

Code :

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

$("<img />").prependTo(this).each( function () {

à la place de :

Code :

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

$("<img />").appendTo(this).each( function () {

Il n'empêche que j'ai toujours un problème : maintenant, un clic sur l'image dévoile bien le contenu du commentaire, mais quand on reclique dessus, le commentaire se déplie et se replie à plusieurs reprises avant d'être "caché" !

C'est toujours visible ici.

Une idée de ce qui cloche dans le code donné précédemment ? Merci de votre aide !

[FixSan]

Bon, j'ai fini par résoudre tous mes petits problèmes. Et sans aide : je suis fier de moi

Voici le code javaScript que j'utilise au final :

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
$(document).ready( function () {
	document.documentElement.className += ' js';
	$("#lastcomments > li").image(
		"../dotclear-files/themes/biblio/img/plus.png"
	);
	$("#lastcomments > li > a > img").click( function () {
		$(this).closest("li").find(".toggle").toggle("slow");
		if ($(this).hasClass('collapse')) {
			$(this).removeClass('collapse');
			$(this).attr("alt", "d\351voiler le commentaire");
			$(this).attr("src", "../dotclear-files/themes/biblio/img/plus.png");
		} else {
			$(this).addClass('collapse');
			$(this).attr("alt", "masquer le commentaire");
			$(this).attr("src", "../dotclear-files/themes/biblio/img/minus.png");
		}
		return false;
	});
});
 
$.fn.image = function (src) {
	return this.each(function () {
		$("<img />").prependTo(this).each( function () {
			this.src = src;
			this.alt = "d\351voiler le commentaire";
		});
		$("#lastcomments > li > img").wrap("<a href=\"#\"></a>");
	});
}

Je ne suis pas certain que ce soit très bien codé... mais au moins, ça fonctionne.