definir un nom d'id contenant une variable

definir un nom d'id contenant une variable - HTML/CSS - Programmation

Marsh Posté le 27-04-2011 à 16:20:32    

bonjour,
 
je suis en train de travailler sur un site contenant un grand nombre de pages similaires et pour eviter que mes fonctions s'emmellent les pinceaux je suis obligé pour l'instant de definir une par une et page par page des noms différents sur chaques pages (en gros je change un nombre dans le nom de chaque id et ce nombre correspond au numero de la page, en gros je fais ça comme un bucheron laborieux car je manque de connaissance) et je voulais savoir si il y avait un moyen simple de definir une fois un variable en haut de chaque page et ensuite de reporter " l'inconnue " dans chaque nom de div (du coup apres je n'aurai plus qu'a dupliquer mes pages et changer un seul éléments dessus et non pas 25 comme j'ai commencé a le faire la.
 
j'ai tenté de cette manière dans mon js mais ça n'a pas l'air de plaire au navigateur (ça ne fonctionne pas en somme) :
 
a la base j'avai ça :
 

Code :
  1. $(document).ready(function(){
  2.                        
  3.         $('#p2_01').mouseover(function(){
  4.               $('#g2_01').fadeIn(100);
  5.               $('#g2_02,#g2_03,#g2_04,#g2_05,#g2_06').fadeOut(100);
  6.               });
  7. });


 
 
et j'ai tenté ça :
 
 
 

Code :
  1. $(document).ready(function(){
  2.       
  3.         var nb = 2;
  4.       
  5.         $('#p'+nb'_01').mouseover(function(){
  6.               $('#g'+nb'_01').fadeIn(100);
  7.               $('#g'+nb'_02,#g'+nb'_03,#g'+nb'_04,#g'+nb'_05,#g'+nb'_06').fadeOut(100);
  8.               });
  9. });


 
mais ça ne fonctionne pas, problème de syntax ?

Reply

Marsh Posté le 27-04-2011 à 16:20:32   

Reply

Marsh Posté le 27-04-2011 à 21:53:23    

Oui étrange problème de syntaxe :)

 

Tu étais bien parti pourtant, si tu met un + entre une string et une variable, prquoi pas entre une variable et une string ? ;)

 

corrigé :

Code :
  1. $(document).ready(function(){
  2.       
  3.         var nb = 2;
  4.       
  5.         $('#p'+nb+'_01').mouseover(function(){ ....
  6. });
 


Sinon c'est un peu lourd pr le dev ce genre de systeme (comme tu as pu t'en rendre compte ;)) tu dois pouvoir centraliser / généraliser un peu tes fonctions pr qu'elles puissent s'appliquer sur plusieurs pages non ?

 

- un id n'a a etre unique que sur une page en cour
- tu peux aussi utiliser les classes (css donc :p)


Message édité par vanish le 27-04-2011 à 21:55:50
Reply

Marsh Posté le 28-04-2011 à 18:23:08    

merci ! effectivement ça marche :)  
 
plus j'avance, plus j'apprend a optimiser mon code et a en marquer le moins possible (il me reste encore pas mal de chemin a faire, mais j'avance ^^ ) pour ce qui est des id unique sur page en cours, j'avai pris ce parametre en compte, le souci c'est que pas mal de mes pages sont loadées ensemble au depart dans des 'include' (et apparaissent en fonction des rubrique cliqué, ce qui me permet de faire des animation chouette pour passer d'une page a l'autre) donc du coup j'etais obligé de mettre des id différent vraiment sur toute les pages. C'est ma structure de base qui serait a remettre en cause en faite mais au stade ou j'en suis sur ce site je vais continuer avec ça, par contre pour les prochains, clair que je vais chercher a faire plus simple et plus malin xD
 
sinon derniere question, en rapport a cette variable, y'a t'il un moyen de l'utiliser aussi dans le corps HTML du doc ?  
par exemple dans une balise div directement :
 

Code :
  1. <div id="p"+nb+"_01" >....

 
 
(qui ne fonctionne pas tel quel)

Reply

Marsh Posté le 28-04-2011 à 21:40:05    

Salut,  
 
non mais dans ton cas de figure particulier le php est tt indiqué, et ça reste extrement simple comme code :
 
au debut de la page  
 
<?php
    $nb = 2;
?>
 
dans le html :
 
<div id="p<?php echo $nb; ?>_01">...
 
avec bien entendu l'extension php au lieu de html pr les fichiers.

Reply

Marsh Posté le 28-04-2011 à 23:13:38    

merci merci :D !!! ça tombe bien, vu que j'ai du faire des include, mes fichiers sont deja de type *.php ! donc je vais pouvoir l'y mettre simplement ^^
 
et je suis passé en phase optimisation de mon code (et apprentissage du javascript du coup) et je butte sur certaine notion qui doivent etre elementaires mais pas evidente pour moi :
 
j'ai 11 pages pouvant etre appelé grace a 11 thumbnails respectifs et j'ai tenté de rassembler tout ça en une formule :
 

Code :
  1. var a = 1 ;
  2.        
  3.          $('#ct_th_0'+a).click(function(){
  4.                
  5.                       var id_gen = '#gal_0'+a;
  6.                       var id_gen_av = '#gal_0'+a-1;
  7.                       var id_gen_ap = '#gal_0'+a+1;
  8.                      
  9.                    
  10.               $(id_gen).animate({"left":"0px"},500);
  11.               $(id_gen_av).css({"left":"-1000px"});
  12.               $(id_gen_ap).css({"left":"1000px"});
  13.               });


 
en gros en cliquant sur le thumb #ct_th_01 par exemple la page #gal_01 vient se glisser (parallèlement la page suivante donc #gal_02 se positionne 1000px a droite et la précedente, donc la #gal_011 se calle a -1000 a gauche afin d'anticiper leur venu possible)
 
actuellement dans le code que je viens de poster ça ne fonctionne que sur le thumbnail 1 (normal) mais j'ai tenté  de definir "a" comme pouvant un entier de 1 à 11 mais je n'y parvient pas, j'ai tenté en faisant comme ceci :
 

Code :
  1. for (i=1; i<=11; i++) { var a=i; et ensuite toute ma fonction }

 
 
mais ce qu'il se passe est que quelque soit le thumbnail sur lequel je clique il m'envoi directement a la page 11, je n'ai pas du bien comprendre le systeme de boucle ou alors ça ne correspond pas a mes besoin présent, j'ai cherché du coté d'un systeme de listage d'entier (genre "a" peut etre 1 ou 2 ou 3 ou etc... ou 11), et je suis tombé sur les Array mais ça n'a pas l'air de correspondre non plus.
Y'aurai t'il un moyen simple de dire que "a" peut etre n'importe quel entier compris entre 1 et 11 et que lors du clique il prend la valeur de l'élément cliqué pour se reporter sur ceux compris dans la fonction ?

Reply

Marsh Posté le 30-04-2011 à 21:47:15    

Salut,
 
à priori le problème est là :
 
var id_gen_ap = '#gal_0'+a+1;
 
En javascript le + sert aux Maths ET à la concaténation. 2tant donné que c une addition avec melange de strings et nombre le resultat est :
 
'#gal_011' et non pas '#gal_02'
 
Solution :
 
 '#gal_0'+(a+1);
 
Pour la soustraction pas de prob vu que le - ne sert qu'aux Maths

Reply

Marsh Posté le 30-04-2011 à 23:08:25    

salut ! merci encore pour tes indications, je vais commencer a pouvoir m'y retrouver un peu plus dans la syntax de base du javascript :) !  
 
par contre je suis toujours bloqué sur ma boucle "for" qui me renvoi en gros systematiquement i = 11 lorsque je clique sur n'importe quel thumbnail alors que je voudrais qu'il garde en memoire le i (compris entre 1 et 11) correspondant au numero du thumbnail cliqué. voici ce que j'ai ecrit :
 

Code :
  1. for (i=1; i<=11; i++) {
  2.          var a = i ;
  3.        
  4.          $('#ct_th_0'+a).click(function(){
  5.                
  6.                       var id_gen = '#gal_0'+a;
  7.                       var id_gen_av = '#gal_0'+(a-1);
  8.                       var id_gen_ap = '#gal_0'+(a+1);
  9.                
  10.               $(id_gen).animate({"left":"0px"},500);
  11.               $(id_gen_av).css({"left":"-1000px"});
  12.               $(id_gen_ap).css({"left":"1000px"});
  13.               });
  14.          }


 
il semble que la boucle for ne corresponde pas a ce qu'il me faudrait mais j'ai googlisé une bonne partie de l'aprem et j'ai rien trouvé concretement qui pourrait correspondre.
 
en gros pour simplifier je voudrai en cliquant sur ct_th_0+a ou a est un entier compris entre 1 et 11, la gal_0+a (ou a est le meme que pour le ct_th_0) réagisse (et se positionne a 0px, je pense qu'une fois que ça fonctionnera pour ce cas les a+1 et a-1 suivront)
 
donc ce serait vraissemblablement ma boucle for qu'il faudrai que je remette en question, mais je n'ai rien trouvé d'autre a mettre.
 
avez-vous une idée de ce vers quoi il faudrait que je me tourne ?

Reply

Marsh Posté le 01-05-2011 à 09:36:14    

re,
 

Code :
  1. for (i=1; i<=11; i++)
  2. {
  3.         $('#ct_th_0'+i).click(traiterClic);
  4. }
  5. function traiterClick(e)
  6. {
  7.       var cible = Number(this.id.substr(7));
  8.              
  9.       $('#gal_0'+cible ).animate({"left":"0px"},500);
  10.       $( '#gal_0'+(cible -1)).css({"left":"-1000px"});
  11.       $( '#gal_0'+(cible +1)).css({"left":"1000px"}); 
  12. }


 
Et envore mieux, en mettan,t une classe css sur tout tes elements et en laissant les memes id :
 

Code :
  1. $('.thumbs').click(traiterClic);
  2. function traiterClick(e)
  3. {
  4.       var cible = Number(this.id.substr(7));
  5.              
  6.       $('#gal_0'+cible ).animate({"left":"0px"},500);
  7.       $( '#gal_0'+(cible -1)).css({"left":"-1000px"});
  8.       $( '#gal_0'+(cible +1)).css({"left":"1000px"}); 
  9. }

Reply

Marsh Posté le 01-05-2011 à 15:40:33    

merci beaucoup !!! :D ça marche ^^  
 
alors je vous embète encore un peu si possible, pour essayer de bien tout comprendre, comme ça apres je pourrais appliquer ça a d'autre cas de figure en le modifiant et surtout a commencer a mieux comprendre d'autre type de fonction en les lisant dans des exemple lors de mes recherches.
 
donc au debut je clique sur n'importe quel thumb (soit en utilisant la class pour les rassembler soit avec une boucle for),
ce qui execute la fonction traiterclick.
 
mais par exemple je n'ai pas saisi pourquoi il y a ce "e" dans

Code :
  1. function traiterClick(e)

?
 
toujours est-il que ensuite le choses se sont un peu compliquées pour moi  :pt1cable: mais je crois avoir saisie un peu, dites moi si je me trompe :
 

Code :
  1. var cible = Number(this.id.substr(7));


 
on defini la variable "cible" comme etant le 7e caractere de la chaine de caractere pointé par "this" qui serait donc #gal_0 + cible ? la ou je me perd un peu (mais comme ça marche, c'est que je reflechi pas encore correctement) c'est que j'aurai cherché plutot a recuperer le "i" de la chaine '#ct_th_0'+i (mais ce qui aurait donné substr(9) et non 7, c'est pourquoi j'en ai déduis que le substring venait de gal_0).  
 
en gros j'ai du mal a voir comment on recupere le i du #ct_th_0 cliqué pour en faire usage sur les #gal_0

Reply

Marsh Posté le 01-05-2011 à 21:18:21    

Re,
 
pour l'argument e, je l'ai mis par reflexe mais effectivement ici il ne sert pas. Il s'agit d'un objet Event que Jquery transmet lors d'un evenement.
http://api.jquery.com/category/events/event-object/
 
Sa fonction la plus souvent utilsié est e.preventDefault() qui annule le comprotement par defaut lié à l'evenement (par exemple si tu fais i click(machin) sur un lien en mettant e.preventDefault() dans la fonction machin, le lien ne sera pas ouvert automatiquement)
 
 
Pour la recuperation de l'id, tu as une chaine
 
ct_th_0XXXX (peut importe le nombre de X / chiffres à la fin)
et non pas #ct_th_0XXXX, l'id recupérer sur un element html ne commence pas par dièse, meme si tu t'en sers pr indiquer que tu cible un id
 
la fonction substring :
 

Citation :


String.substring(Integrer debut , [Integrer fin])
Extrait une sous-chaîne d'une chaîne en partant de l'indice debut et jusqu'à l'indice fin.
Si fin n'est pas précisé, la chaîne est extraite depuis debut jusque sa fin.


 
Ici fin n'est pas précisé donc on recuperer de l'indice 7 jusqu'a la fin.
Et il faut savoir que l'indice d'une String commence, comme un Array (c'est lié, une String a la base c'est un tableau de caracteres), à 0.
Donc :
 
c  t _  t h _ 0 XXXX
0 1 2 3 4 5 6 7....
 

Reply

Marsh Posté le 01-05-2011 à 21:18:21   

Reply

Marsh Posté le 01-05-2011 à 23:31:39    

merciiiiiii !! je commence a avoir un peu la tete dedans maintenant xD (et mon script est quasiment fonctionnel ! ) avant je l'avais écrit sans condition et sans inconnu, il faisait plus de 130 lignes , maintenant il n'en fait plus qu'une dizaine ! :D  
 
il me reste 2 dernière question avant qu'il soit nickel, j'ai tenté par moi meme mais encore une fois j'ai buté -_-  
 
premièrement :  
 
dans la boucle for (i=1 ; i<=11; i++) si je fait (i-1) lorsque i=1 est-ce qu'il boucle vraiment et qu'il calcule i=11 ou alors il faut que j'ajoute un systeme de condition supplémentaire pour y parvenir (en gros dans mes galerie, lorsque j'arrive a la 11e il faut qu'en switchant a la suivante il retourne a la 1e c'est pour ça)
 
et dernier petit detail :
 
je cherche a faire varier la taille de la chaine de caractère que preleve substr (car en fait j'ai appliqué cette meme fonction que vous m'avez aidé a mettre en place sur un autre groupe de div dont la partie "i" a relever ne se trouve pas a la fin du nom) ceci dit j'aurai pu simplement changer leur nom dans la partie html mais je me suis dit qu'autant continuer a approfondir le javascript un peu, ça me sera plus util ^^ .
 
donc en gros il faut que lorsque le i de gal_0 est inferieur a 10 :
 

Code :
  1. var id_fleche_g = Number(this.id.substr(7,1))


 
et lorsqu'il est superieur a 10 :
 

Code :
  1. var id_fleche_g = Number(this.id.substr(7,2))


 
j'ai donc tenté ceci :

Code :
  1. for (i=1; i<=11; i++) {     
  2.          $('#ct_th_0'+i).click(affichage_galerie);//click sur le thumbnail
  3.          $('#fl_ct_0'+i+'_g').click(switchage_gauche);//click sur la flèche gauche
  4.          $('#fl_ct_0'+i+'_d').click(switchage_droite);//click sur la flèche droite
  5.          }
  6. function switchage_gauche() {
  7.                               
  8.               var a;
  9.               if (i>=10) {a=2;} else {a=1;}
  10.               var id_fleche_g = Number(this.id.substr(7,a));
  11.               $('#gal_0'+id_fleche_g).animate({"left":"-1000px"},500);
  12.               $('#gal_0'+(id_fleche_g+1)).animate({"left":"0px"},500);
  13.               $('#fl_ct_0'+id_fleche_g+'_g,#fl_ct_0'+id_fleche_g+'_d').fadeOut(500);
  14.               $('#fl_ct_0'+(id_fleche_g+1)+'_g,#fl_ct_0'+(id_fleche_g+1)+'_d').fadeIn(500);
  15.               $('#gal_0'+(id_fleche_g+2)).css({"left":"1000px"});
  16.          }


 
mais du coup mes fleche ne sont plus fonctionnel du tout donc mon ajout doit etre mauvais, auriez vous une idée du problème ?
 
 

Reply

Marsh Posté le 02-05-2011 à 15:12:39    

Salut,

 

pour la deuxieme question substring prend en arguments deux position dans la chaine, et non pas position de debut, longueur, là ça serait (7, 7) ou (7, 8), sinon tu a substring qui lui fonctionnerait avec ta methode (7, 1) ou (7, 2).

 

Pour la boucle, je n'ai pas très bien compris ta question, mais tu peux bien agir directement sur i dans ta boucle.

 

Si tu fais
for(var i =0; i < 11; i++)
{
    i--;
}
ta boucle fera du sur place (et ça plantera vu que boucle infinie)

 

for(var i =0; i < 11; i++)
{
    i -= 2;
}
elle ira a l'envers (mais la encore, plantage, car i sera tjrs inferieur à 11)

 


tu peux aussi changer directement l'incrementation de la boucle :
for(var i = 11; i >= 0; i--)
{
    //la i ira de 11 à 0
}

 


Message édité par vanish le 02-05-2011 à 15:13:32
Reply

Marsh Posté le 07-05-2011 à 18:53:59    

salut ! desolé pour le retard de ma réponse (j'ai été charrette sur un autre truc pendant quelques jours -_- ) merci pour vos indications ! mon script est totalement fonctionnel :D !! (en fait pour le bouclage des galerie j'ai quelques "if patati patata" et ça marche nickel, bref je commence a arriver a scripter des trucs simple spontanément et ça fait du bien :3 !  
 
donc un grand merci a toi :) ! me voila en possession des bases js (mais il est probable que je revienne avec de nouveau probleme du coup  :pt1cable: avec le js, mais c'est pas pour tout de suite !! )

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed