Jquery , declarations de fonctions avec 1 boucle

Bonjour,

je fais un site , et j'utilise jquery pour afficher et cacher des éléments : http://entretien-chaudiere.fr/page_nettoyage.php

J'ai donc commencé par faire affiché disparaitre le texte de la liste , ca marche bien .
J'ai des vidéos a mettre , je me suis dis que je vais faire pareil , un petit clique et hop ca fais apparaitre la vidéo , un autre et elle repart .

J'ai donc un ( faux ) problème ( parce que ca va changé je détail après .. ) , c'est que je trouve assez pénible de devoir écrire la fonction pour chaque élément a faire apparaitre disparaitre .. les 6 éléments de ma liste , ca va je débute en jquery, je me soucis pas d'en écrire 6 ..
Mais bon la j'ai une 15 aine de vidéo , si je dois re ecrire le code pour les 15 videos en plus des 6 1ere , je commence a trouvé que ca fais beaucoup , surtout que le code se ressemble beaucoup .. : http://entretien-chaudiere.fr/js/script.js

Du coup , je me demandé , si par hasard je peux faire une boucle for de 1 a 15 , qui va déclaré mes 15 fonctions .. ou si c'est pas possible :s

	for(var i=1;i=15;i++)
	{
		$("a#affichevideo"+i).click(function() {
			if(VideoOuverte!=i)
			{
				// on cache tous les elements ( on evite de faire des tests pour savoir qui est ouvert comme ca .. ) 
				
				for(var j=1;j=15;j++)
				{
				$("#video"+j).hide("");
				}
			
			
			
				//on montre video1 , et on indique que Element ouvert est le 1er 
				VideoOuverte=i;
				$("#video+i").show("");
			}
			else
			{
				VideoOuverte=0;
				$("#video"+i).hide("");
			}
			
			
				  return false; // pour ne pas suivre le lien . ( href="#" ) 
		});
	
	}

hop en adaptant rapidement le code que j'ai écris ca donnerait ca en gros , mais je pense pas que je puisse déclaré des fonctions a la volé avec une boucle ..


Bon ensuite enfaite c'est un peu un faux problème , parce que j'ai voulu faire ca pour avoir un petit effet sympa ( et un gain de place ^^ ) .
Mais du coup j'ai pas fais comme d'habitude .. et donc en me souciant après coup de ce que ca rend sans javascript , c'est immonde .. ( juste avec les 5 1ere vidéos .. je préfère pas imaginé avec 15 .. )

Du coup , je veux quand même savoir si c'est possible de déclaré des fonctions en boucle comme ca ^^ , mais il faut aussi que je change ca ^^
Du coup j'hésite entre 2 trucs :
-soit je fais une classe qui cache toutes mes vidéos des le départ ( display:none) , et ensuite j'adapte mon code pour que quand je clique sur un des liens , je vais enlevé cette classe , et l'élément va apparaitre ( a la base j'avais même espéré que quand je faisais du show ou hide , ca faisait changé la propriété display , mais a priori non .. ou du moins ca fais pas sauté la classe , et ca prend pas le dessus ^^ ) .

-soit je fais un div qui sera vide a la base , et ensuite je génère avec du innerHtml par exemple le bon code de la vidéo dans mon div ( ou je fais un innerHtml vide pour faire disparaitre la vidéo )

Comme ca dans les 2 cas j'aurai bien un rendez assez similaire a ce que j'ai pour le moment , mais ce qui sera nettement mieux , c'est que je n'aurai plus de problème pour les gens qui n'utilise pas javascript , ils ne verront pas les 15 vidéos qui prennent 95% de la page ^^ , ils auront juste un lien qui renverra vers mes vidéos .

Voila , ,donc plus que de l'aide pour le faire ( j'ai déjà pas mal ma petite idée ^^ ) , je voudrais donc savoir ce qui sera le mieux , et surtout pourquoi ( je demande parce que on m'a assez souvent dis que innerHtml c'est pas bien tout ca .. , mais enfaite , je crois que j'ai jamais eu une raison réel .. peut être juste parce que ces gens aiment pas javascript , trouve ca "crade" .. )

Salut,

mathieu1004 a écrit :
Du coup , je me demandé , si par hasard je peux faire une boucle for de 1 a 15 , qui va déclaré mes 15 fonctions

C'est mieux que de récrire 15 fois le même bout de code, c'est sûr, mais c'est encore mieux de déclarer une fonction et de l'appeler 15 fois. Avec jQuery, ça donnerait ça :

var liensVideos = $('.text_liste a'); // On récupère tous tes liens vidéos dans un objet jQuery...
var videos = $('object');             // et toutes les vidéos dans un autre.

liensVideos				           // Pour chacun des liens, ...
	.click(function(){               // lorsqu'on clique dessus...
		videos.hide();                // on masque toutes les vidéos...
		var videoId = $(this).attr('href'); // puis on récupère l'id de la video a afficher...
		var videoAfficher = $(videoId);	  // ce qui nous permet de récupérer la vidéo à afficher
		videoAfficher.show();         // et enfin d'afficher cette dernière.
		return false;	            // On ne suit pas le lien.
	});

Pour cela, il faut que le href de tes liens soit "#video[numéro]" (donc "#video1", "#video2", "#video3", etc.), et non plus seulement "#". [Note: je n'ai pas utilisé le chaînage typique de jQuery pour que ta lecture soit plus simple, avec les commentaires, mais libre à toi ensuite de l'appliquer]

Dans le même ordre d'idée (une seule fonction 15 fois plutôt que 15 fois le même code), tu peux changer ça :

	// on masque toutes les videos
	$("#video1").hide();
	$("#video2").hide();
	$("#video3").hide();
	$("#video4").hide();
	$("#video5").hide();

... en ça :

	// on masque toutes les videos
	$("#video1, #video2, #video3, #video4, #video5").hide();

mathieu1004 a écrit :
-soit je fais une classe qui cache toutes mes vidéos des le départ ( display:none) , et ensuite j'adapte mon code pour que quand je clique sur un des liens , je vais enlevé cette classe

C'est effectivement une bonne idée, cela te donne plus de contrôle que show() et hide(). Pour cela tu peux simplement remplacer ces deux fonctions par addClass() et removeClass(), et gérer l'affichage/masquage en CSS.

mathieu1004 a écrit :
-soit je fais un div qui sera vide a la base , et ensuite je génère avec du innerHtml par exemple le bon code de la vidéo dans mon div ( ou je fais un innerHtml vide pour faire disparaitre la vidéo )
[...]
on m'a assez souvent dis que innerHtml c'est pas bien tout ca .. , mais enfaite , je crois que j'ai jamais eu une raison réel .. peut être juste parce que ces gens aiment pas javascript , trouve ca "crade" ..

En ce qui me concerne, je n'ai rien contre innerHTML, bien au contraire. Cela dit, dans ton cas, je crois que c'est inutile de créer/détruire les élements plutôt que de simplement les masquer. Donc je ne partirais pas sur cette solution.
Modifié par marcv (26 Jul 2010 - 10:38)

Oki merci bien

Pour le remplacement je pensé en effet faire plutot avec la classe a enlevé remettre , mais du coup pour les href , je vais mettre le lien vers la video youtube a la place d'un simple href=#

Je vais voir d'adapté ton code , et si je rencontre des difficultés je reviendrai posté

Je trouvais quand même louche de devoir écrire le "même" code autant de fois ..

Bon ba ca marche
J'ai fais ca

var liensVideos = $('.text_liste a'); // On récupère tous tes liens vidéos dans un objet jQuery... 
	var videos = $('object');             // et toutes les vidéos dans un autre. 
		
	//videos.hide(); // on le fais plus c'est déjà caché en css ( j'avais oublié de l'enlevé je commencé a m'arracher les cheveux a pas comprendre pourquoi ca apparaissez pas mes vidéos quand j'enlevé la classe cache .. )
 
	liensVideos.click(function(){  
	
	videos.addClass('cache'); // on cache toutes les videos 
	
	$("#"+$(this).attr('title')).removeClass('cache');  // on enleve .cache de la video que l'on veux voir
        return false;                // On ne suit pas le lien. 
    });

C'est rajouté un attribut title pour avoir le nom de la vidéo que cela dois ouvrir , puis j'ajoute le # a la main pour construire un id de vidéo .

Après coup je me suis dis qu'en faite , j'aurai pu juste caché mes objets en css , et que au chargement de la page si y a du javascript , la 1ere chose que je faisais c'est d'enlevé le cache de toutes les vidéos , et ensuite de géré comme avant avec show et hide .

mathieu1004 a écrit :
Après coup je me suis dis qu'en faite , j'aurai pu juste caché mes objets en css , et que au chargement de la page si y a du javascript , la 1ere chose que je faisais c'est d'enlevé le cache de toutes les vidéos

C'est pas l'inverse qu'on fait en général?
1. Sans JavaScript: tous les contenus apparaissent.
2. Chargement de la page: on rajoute des classes en JavaScript pour masquer les contenus.
3. Ensuite, suivant les actions de l'utilisateur: on rajoute ou enlève des classes pour afficher/masquer les contenus.

J'ai l'impression que tu fais les choses à l'envers. Mais je me trompe peut-être.

Florent V. a écrit :
C'est pas l'inverse qu'on fait en général?

oui , et non ^^

Pour le texte c'est se que j'ai fais , le texte disparait grâce au javascript et je le fais apparaitre au clique , mais pour les vidéos je peux pas faire pareil , parce que sinon j ai ( pour le moment 5 et par la suite 15 .. ) vidéo qui vont toute apparaitre en même temps des le départ , et au meme endroit ( cote a cote quoi ) .. du coup c'est très moche .

L'idée la c'est le contraire : les vidéos sont caché et invisible pour un utilisateur sans javascript , et les liens le renvoie vers la video sur youtube . Et si il a javascript d'utilisé , alors la avec les cliques je vais les faire apparaitre a l'utilisateur chanceux qui n'aura pas a allé sur un autre site ..

En gros , pour les utilisateurs qui ont javascript , ca marche comme j'en ai envie , et pour les utilisateurs sans javascript , ca marche en légèrement "dégradé" , mais ou il va pas s'enfuir parce qu'il y a 15 vidéos cote a cote qui apparaissent xD
Modifié par mathieu1004 (26 Jul 2010 - 21:53)