CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 29 17:49:29

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil > Forum >

JavaScript Orienté objet (POO)

Réduire la longueur de ma fonction

Poser une question dans le forum ou lancer une discussion

Réduire la longueur de ma fonction

lundi 24 janvier 2011 à 17:01:47 | Réduire la longueur de ma fonction

smile75

2 msg

38 msg CS

Bonjour à tous,
Je tente de faire un formulaire un peu plus sexy avec l'utilisation de bouton ajouter masquer des champs.
Pour cela j'ai d'abord insérer des bouton+ en image.
Ensuite je lui demande d'afficher les li's contenant mes champs.
Je n'arrive pas à parler plus intelligemment aux class' qui se comportent toutes de la même façon puisqu'elles ont les même class' (que je ne peux pas changer pour des id's) incrémenté d'un numéro, et toujours :nom, prenom, mail, fixe, portable.

Ça marche mais c'est moche...
Quelqu'un pourrait-il m'aiguiller afin d'épurer tout ceci?
et si au passage cette personne pourrait me dire comment masquer le bouton une fois appuyé car j'ai testé avec la fonction cachebtn mais vu que l'appel de cette fonction appel un id crée par javascript... je suis perdu.

D'avance, merci beaucoup.

Charles

Code Javascript :

function getElementsByClassName(className, tag, elm){
		var testClass = new RegExp("(^|s)" + className + "(s|$)");
		var tag = tag || "*";
		var elm = elm || document;
		var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
		var returnElements = [];
		var current;
		var length = elements.length;
		for(var i=0; i<length; i++){
			current = elements[i ];
			if(testClass.test(current.className)){
				returnElements.push(current);
			}
		}
		return returnElements;
	}
	
	function visibilite(targetElements)
	{
		var uMax = targetElements.length;
		for(var u=0;u<uMax;u++){
			if (targetElements[u].style.display == "none")
			{
				targetElements[u].style.display = "" ;
			} else {
				targetElements[u].style.display = "none" ;
			}
		}
		
	}
	function cachebtn(id_bouton){
		if(id_bouton){
			//alert(id_bouton);
			document.getElementById(id_bouton).style.visibility="hidden";
		}
	}
	
	var monnom2 = getElementsByClassName('editer_real2','li');

	var monnom3 = getElementsByClassName('editer_real3','li');
	var monpre3 = getElementsByClassName('editer_preal3','li');
	var monemail3 = getElementsByClassName('editer_emailreal3','li');
	var monfixe3 = getElementsByClassName('editer_fixereal3','li');
	var monport3 = getElementsByClassName('editer_portreal3','li');

	var monnom4 = getElementsByClassName('editer_real4','li');
	var monpre4 = getElementsByClassName('editer_preal4','li');
	var monemail4 = getElementsByClassName('editer_emailreal4','li');
	var monfixe4 = getElementsByClassName('editer_fixereal4','li');
	var monport4 = getElementsByClassName('editer_portreal4','li');
	
	var monnom5 = getElementsByClassName('editer_real5','li');
	var monpre5 = getElementsByClassName('editer_preal5','li');
	var monemail5 = getElementsByClassName('editer_emailreal5','li');
	var monfixe5 = getElementsByClassName('editer_fixereal5','li');
	var monport5 = getElementsByClassName('editer_portreal5','li');
	
	var monnom6 = getElementsByClassName('editer_real6','li');
	var monpre6 = getElementsByClassName('editer_preal6','li');
	var monemail6 = getElementsByClassName('editer_emailreal6','li');
	var monfixe6 = getElementsByClassName('editer_fixereal6','li');
	var monport6 = getElementsByClassName('editer_portreal6','li');
		
	monnom2[0].innerHTML += "<a href='javascript:visibilite([monnom3[0],monpre3[0],monemail3[0],monfixe3[0],monport3[0]]);'><img src='images/plus.png)]' title='ajouter un real' /></a>";
	monnom3[0].innerHTML += "<a href='javascript:visibilite([monnom4[0],monpre4[0],monemail4[0],monfixe4[0],monport4[0]]);'><img src='images/plus.png)]' title='ajouter un real' /></a>";
	monnom4[0].innerHTML += "<a href='javascript:visibilite([monnom5[0],monpre5[0],monemail5[0],monfixe5[0],monport5[0]]);'><img src='images/plus.png)]' title='ajouter un real' /></a>";
	monnom5[0].innerHTML += "<a href='javascript:visibilite([monnom6[0],monpre6[0],monemail6[0],monfixe6[0],monport6[0]]);'><img src='images/plus.png)]' title='ajouter un real' /></a>";

	visibilite([monnom3[0],monpre3[0],monemail3[0],monfixe3[0],monport3[0]]);
	visibilite([monnom4[0],monpre4[0],monemail4[0],monfixe4[0],monport4[0]]);
	visibilite([monnom5[0],monpre5[0],monemail5[0],monfixe5[0],monport5[0]]);	
	visibilite([monnom6[0],monpre6[0],monemail6[0],monfixe6[0],monport6[0]]);

mercredi 26 janvier 2011 à 02:03:41 | Re : Réduire la longueur de ma fonction

jdmcreator

272 msg

330 msg CS

Wow ! Je dirais la même chose que toi. Pour commencer, tes noms de variables sont un peu long, déjà si tu les raccourcissais, sa aiderait, de même que getElementsByClassName, tu peux la renommer getClass et personne ne te feras de mal ;) Et puisque toutes les appels à cette fonction utilise "li", peut pourrait tu rajouter

Code Javascript :

function getClass(cl){
return getElementsByClassName(cl,"li")[0]
}

car tu sembles aussi toujours utiliser le 1er élément.

Ensuite, essaye de voir si tu ne pourrais pas générer les éléments à cacher, au lieu de les appeler individuellement.

D'ailleurs quand j'y pense, tu pourrais mettre toutes tes classes dans un tableau et faire générér un tableau des éléments.

Code Javascript :

tb=['editer_real2','editer_real3','...']
tb2=[];
for(i in tb){
tb2.push(getClass(tb[i]);
}

Ainsi donc, tb2[0] équivalera à var monnom2 = getElementsByClassName('editer_real2','li');

Ce qui est donc plus court, et de beaucoup.

Finalement, je me demande pourquoi n'a tu pas placer, tous tes éléments dans une seule fonction visibilite au lieu d'en faire 4 différente.

Et toute dernière chose, les liens "javascript:" ne devraient jamais être utilisé, préfère le "onclick". De plus que

Code HTML :

<a href="javascript:...">

est plus long que

Code HTML :

<a onclick="...">

Il y a beaucoup de chose que je voudrais rajouter, mais je vais te laisser refaire ton code, retourne le moi et je te dirai en le réanalysant ce qui en donne.

JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !

fr.jsinfo.wikia.com

mercredi 26 janvier 2011 à 12:15:57 | Re : Réduire la longueur de ma fonction

smile75

2 msg

38 msg CS

Salut Jdm et merci pour tes conseils!!

C'est 100 fois mieux et plus digeste, en effet j'ai réduis énormément grâce à toi.

Code Javascript :

	function getClass(className, tag, elm){
		var testClass = new RegExp("(^|s)" + className + "(s|$)");
		var tag = tag || "*";
		var elm = elm || document;
		var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
		var returnElements = [];
		var current;
		var length = elements.length;
		for(var i=0; i<length; i++){
			current = elements[i ];
			if(testClass.test(current.className)){
				returnElements.push(current);
			}
		}
		return returnElements;
	}
	
	function visibilite(targetElements)
	{
		var uMax = targetElements.length;
		for(var u=0;u<uMax;u++){
			if (targetElements[u].style.display == "none")
			{
				targetElements[u].style.display = "" ;
			} else {
				targetElements[u].style.display = "none" ;
			}
		}
		
	}
	function cachebtn(id_bouton){
		if(id_bouton){
			//alert(id_bouton);
			document.getElementById(id_bouton).style.visibility="hidden";
		}
	}
	function ReturnEl(cl){
		return getClass(cl,'li')[0];
	}

	tb=['editer_real2','editer_real3','editer_preal3','editer_emailreal3','editer_preal3','editer_fixereal3','editer_portreal3','editer_real4','editer_preal4','editer_emailreal4','editer_fixereal4','editer_portreal4','editer_real5','editer_preal5','editer_emailreal5','editer_fixereal5','editer_portreal5','editer_real6','editer_preal6','editer_emailreal6','editer_fixereal6','editer_portreal6']

	tb2=[];

	for(j in tb){
		tb2.push(ReturnEl(tb[j]);
	}
	
		
	tb2[0].innerHTML += "<a onclick='visibilite([[tb2[1],tb2[2],tb2[3],tb2[4],tb2[5]]]);'><img src='images/plus.png)]' title='ajouter un real' /></a>";
	tb2[1].innerHTML += "<a onclick='visibilite([tb2[6],tb2[7],tb2[8],tb2[9],tb2[10]]);'><img src='images/plus.png)]' title='ajouter un real' /></a>";
	tb2[6].innerHTML += "<a onclick='visibilite([tb2[11],tb2[12],tb2[13],tb2[14],tb2[15]]);'><img src='images/plus.png)]' title='ajouter un real' /></a>";
	tb2[11].innerHTML += "<a onclick='visibilite([tb2[16],tb2[17],tb2[18],tb2[19],tb2[20]]);'><img src='images/plus.png)]' title='ajouter un real' /></a>";

	for(k=0 in tb2){
		visibilite(tb2[k]);
	}

Qu'en penses tu?

Pourrais tu m'aiguiller comme tu la fais sur une fonction qui me reprendrais

Code Javascript :

tb2[11].innerHTML += "<a onclick='visibilite([tb2[16],tb2[17],tb2[18],tb2[19],tb2[20]]);'><img src='images/plus.png)]' title='ajouter un real' /></a>";
genre : 

function ajouplus(recu){
     recu.innerHTML+="<a onclick='visibilite(la un tableau des 4 suivants de recu??);'><img src='images/plus.png)]' title='ajouter un real' /></a>";
}
ajouplus(tb2[11]);

Merci encore!!

jeudi 27 janvier 2011 à 03:26:55 | Re : Réduire la longueur de ma fonction

jdmcreator

272 msg

330 msg CS

Bonjour, tu peux essayer de changer ta fonction visibilite par ceci :

Code Javascript :

	

function visibilite(tw)
	{
		for(var u=0;u<tw.length;u++){
		tn=tw[u];
		tn.style.display=(tn.style.display=="none") ? "" : "none";
		
	}

Ça devrait fonctionner, mais je n'ai pas testé. Si ça ne fonctionne pas, je testerai pour trouver l'erreur mais à première vue, il ne semble pas en avoir.

Quant à ta deuxième demande, je ne la comprends pas, je passerai donc et si tu veux tu m'expliqueras

Code Javascript :

	tb2[0].innerHTML += "<a onclick='visibilite([[tb2[1],tb2[2],tb2[3],tb2[4],tb2[5]]]);'><img src='images/plus.png)]' title='ajouter un real' /></a>";
	tb2[1].innerHTML += "<a onclick='visibilite([tb2[6],tb2[7],tb2[8],tb2[9],tb2[10]]);'><img src='images/plus.png)]' title='ajouter un real' /></a>";
	tb2[6].innerHTML += "<a onclick='visibilite([tb2[11],tb2[12],tb2[13],tb2[14],tb2[15]]);'><img src='images/plus.png)]' title='ajouter un real' /></a>";
	tb2[11].innerHTML += "<a onclick='visibilite([tb2[16],tb2[17],tb2[18],tb2[19],tb2[20]]);'><img src='images/plus.png)]' title='ajouter un real' /></a>";

Tu pourrais le transformer en ceci :

Code Javascript :


tb3=[0,1,6,11];
tb4=[
[1,2,3,4,5],
[6,7,8,9,10],
[11,12,13,14,15],
[16,17,18,19,20]
];

for(var q in tb3){
tb2[tb3[q]].innerHTML+="<a onclick='visibilite([[tb2["+tb4[q].join("],tb2[")+"]]]);'><img src='images/plus.png' title='ajouter un real' /></a>";

}

Il faut que je l'avoue, la syntaxe est lourde, je ne m'attends donc pas à ce que ça marches du premier coup. Si tu as compris, j'ai fait un tableau des numéros des éléments que tu voulais modifié, un tableau des numéros que tu rajoutais en paramètres. Ensuite pour chacun des numéros j'ai modifié le innerHTML en mettant comme paramètre ceci :

Code Javascript :

var chaine="[tb2["+tb4[q].join("],tb2[")+"]]";

Je tiens à te l'expliquer. D'abord on rajoute la chaîne [tb2[. Ensuite de cela, on prend le tableau associé au numéro, c'est à dire tb4[q], on utilise la fonction join, qui mettra le tableau ensemble en mettant entre chacun le texte ],tb2[[. Ensuite, on ferme la chaîne avec ]]];

Compressé manuellement, cela donne :

Code Javascript :

tb3=[0,1,6,11];tb4=[[1,2,3,4,5],[6,7,8,9,10],[11,12,13,14,15],[16,17,18,19,20]];for(var q in tb3){tb2[tb3[q]].innerHTML+="<a onclick='visibilite([[tb2["+tb4[q].join("],tb2[")+"]]]);'><img src='images/plus.png' title='ajouter un real' /></a>"}

Cela donne 240 caractères, contre 606 contre celle que tu m'as donné, c'est donc beaucoup plus court et personnellement, je crois que ça se compresse encore

. J'ai modifié légèrement la fonction que tu m'as donné car il me semble qu'il y a des fautes de syntaxe, je t'indique où en bleu :

tb2[0].innerHTML += "<a onclick='visibilite([[tb2[1],tb2[2],tb2[3],tb2[4],tb2[5]]]);'><img src='images/plus.png)]' title='ajouter un real' /></a>";

Vérifie ceci. Si ça ne marche pas, merci de me donner les erreurs renvoyé le gestionnaire

JDMCreator
--------
Participez au nouveau projet : la wiki sur le javascript !

fr.jsinfo.wikia.com

Cette discussion est classée dans : tag, fonction, var, visibilite, elm

Répondre à ce message

Sujets en rapport avec ce message

portée des variables dans fonction [ par BirD ] salut tout le monde,j'ai un gros problème de variables. Je m'explique, j'ai une fonction (appellée au chargement) qui contien une boucle for. Cette bo tableau avec tri dynamique [ par rcedric ] Salut a tous,voila mon probleme; je cherche à afficher un tableau et que lorsqu l'on clic sur le libellé le tableau est trié et réafficher dynamiqueme interprétation de variables dans une fonction [ par adn_ ] Bonjour,Voila j'ai une fonction a laquelle je passe 2 variables i et j ou i est le numéro de ma checkbox et j le nom, de ce coté la pas de probleme la Fonction javascript [ par righton ] Bonjour voici une fonction pour mettre du bold ou de l'italic dans un champ de saisie :function format(f) { var str = document.selection.createRange( problème d'appel de fonction [ par billy21121 ] bonjour, Voila je suis entrain de monter un intranet pour une entreprise et lorsque j'appelle une fonction javascript que ce soit avec ie ou mozilla Erreur T_Var dans ma fonction javascript [ par raven44 ] Bonjour à tous,Je n'arrive pas à me débarasser de cette erreur T_var dans mon script : Que signifie t'elle ? le but de ce script des de me retourner d Div bougeable en fonction du scroll... problème le navigateur panique... Script très pratique pour faire planter IE [ par MeTh ] Bonjour,J'essai de réalisé un script qui déplace les div verticalement ou horizontalement en fonction du scroll de la fenetre pour que les div reste t Un tout petit pb. [ par PascalCmoa ] PascalCmoa email: PascalCmoaBonjour à tous <img src=/imgs Problème avec setTimeout [ par killergamer ] Salut tout le monde.... J'ai un problème : Je doit appeler une fonction avec l'aide de setTimeOut. Mais lorsque j'appelle cette fonction, je dois au Retourner valeur Fonction [ par piep14 ] Bonsoir, je souhaite récupérer deux valeurs d'une fonction. J'ai fait le code suite :Code :<pre class="alt2" styl

Livres en rapport

JSP and Tag libraires for web development

JSTL: JSP Standard Tag Library

Professional JSP Tag Libraries

HTML

Tous les livres pour Tag, Fonction, Var, Visibilite, Elm

Nos sponsors

Derniers Blogs

POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante

JOYEUX ANNIVERSAIRE NIX par ebartsoft

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

Forum

RE : UTILISER UN .JS par jopop

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Creation d-une presentation dynamique avec Keynote
Budget : 5 000€
Creation d-un module de devis
Budget : 800€
Conception de scripts audiotel
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP