Réduire la longueur de ma fonction

Question

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




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";
monnom3[0].innerHTML += "";
monnom4[0].innerHTML += "";
monnom5[0].innerHTML += "";

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]]);

jdmcreator · Answer

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
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.

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 
[javascript:... 

est plus long que
]

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

smile75 · Answer

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.


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";
tb2[1].innerHTML += "";
tb2[6].innerHTML += "";
tb2[11].innerHTML += "";

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 

tb2[11].innerHTML += "";
genre : 

function ajouplus(recu){
     recu.innerHTML+="";
}
ajouplus(tb2[11]);


Merci encore!!

jdmcreator · Answer

Bonjour, tu peux essayer de changer ta fonction visibilite par ceci :
	

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 
	tb2[0].innerHTML += "";
tb2[1].innerHTML += "";
tb2[6].innerHTML += "";
tb2[11].innerHTML += "";


Tu pourrais le transformer en ceci :


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+="";

}



 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 :
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 :
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+=""}

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 += "";

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

Réduire la longueur de ma fonction

3 réponses

Votre réponse

Discussions similaires