Dans l’article intitulé « Ajouter de l’interactivité à une animation », nous avons appris à cibler un élément selon plusieurs méthodes, mais revenons sur une approche plus large. En effet, dans certains cas, vous aurez besoin d’effectuer des itérations (répétitions) avec certains éléments de la page (de la scène). Pour ce faire, plusieurs techniques s’offrent à vous, tout dépend des éléments à cibler.
children() : Cibler tous les enfants d’un élément
Faites appel à la méthode children() sur un élément qui en contient d’autres (ses enfants). Dans notre exemple, nous avons placé 36 cases (des divs) dans un plateau (un groupe représenté sous la forme d’une div).
sym.$("plateau").children().css({transform:"scale(0.95)"})
length : Connaitre le nombre d’enfants contenus dans un élément
Dans cet autre exemple (ci-dessous), nous cherchons à connaitre le nombre d’enfants contenus dans l’élément « plateau ». Nous affichons le résultat dans un texte intitulé affichageCels qui se trouve sur la scène. Nous utilisons la méthode text().
sym.$("affichageCels").text(sym.$("plateau").children().length);
boucle for
Traditionnellement, en programmation, nous utilisons le type de structure ci-dessous pour pouvoir répéter une action :
for (i=une valeur initiale;i<=une valeur;i++) ligne d’instruction à répéter; ligne d’instruction à répéter; etc.; }
Dans l’exemple ci-dessous, nous répétons 5 fois une action, celle qui consiste à cibler les éléments c1, c2, c3, c4 et c5 pour régler leur opacité à 20%
for (i=1;i<=5;i++) {
sym.$("c"+i).css({opacity:0.2})
Quelques précisions : Cette répétition n’est pas temporisable, cela signifie que vous ne pouvez pas définir la vitesse avec laquelle les instructions sont répétées, le but d’une telle itération étant de répéter le plus rapidement une (série d’)instruction(s). La lettre i de l’exemple ci-dessus est un choix arbitraire, il peut-être remplacé par n’importe quelle autre lettre ou mot tant que ce dernier ne contient pas de caractères accentués, spéciaux ni même d’espace. Dans cet exemple nous comptons de 1 à 5 car nous utilisons l’opérateur <=, mais nous aurions compté jusqu’à 4 si nous avions écrit i<5. D’une façon générale, il existe 6 opérateurs : == (égalité), != (différence), > (supériorité), >= (supériorité et égalité), < (infériorité), <= (infériorité et égalité).
Dans l’exemple ci-dessous, nous répétons une boucle for pour pouvoir :
- régler l’opacité d’un élément,
- attribuer une propriété (accompagnée de sa valeur) à ce même élément
- attribuer un script (répondant à l’évènement click) à ce même élément
for (i=1;i<=sym.$("plateau").children().length;i++)
sym.$("c"+i).css({opacity:0.3});
sym.$("c"+i).attr({numero:i});
sym.$("c"+i).click(cliquee);
}
Dans l’exemple ci-dessus, nous n’avons pas défini une valeur fixe, précise, dans le test avec l’opérateur, car elle est spécifiée différement. Comme nous l’avons vu ci-dessus, nous cherchons à connaitre le nombre éléments contenus dans « plateau » pour pouvoir définir une limite de répétions de notre boucle. La fonction « cliquee » se trouve ci-dessous, son analyse sort du contexte de nos explications relatives aux itérations.
each() : répéter une action sur des éléments de même type
Comment cibler toutes les balises h1 ou div d’une page ? La réponse à cette question est simple car il existe une syntaxe très simple :
sym.$(’type/nom de la balise’).each(nom de la fonction à exécuter);
Comme vous pouvez le constater, la méthode est extrêmement simple, mais il faut encore pouvoir faire référence à chaque élément dans la fonction appelée. Pour ce faire, vous devez rechercher cet élément à l’aide de la méthode $() et du mot clé this. Ainsi, dans l’exemple ci-dessous, nous ciblons tous les éléments h1 pour changer leur couleur.
sym.$('h1').each(changerCouleur);
function changerCouleur () {
sym.$(this).css({color:"purple"});
}
Les classes
Comme nous l’avions déjà vu dans l’article intitulé « Ajouter de l’interactivité à une animation », il est possible de cibler plusieurs éléments s’ils font tous partie d’une même classe. Référez-vous à cet article pour plus de détails.
sym.$(".cellule").css({opacity:0.3})
sym.$(".cellule").click(cliquee);
La fonction cliquee utilisée dans les exemples de cet article
function cliquee () {
if(sym.$(this).attr("numero")%2==0) {
sym.$(this).css({opacity:1,backgroundColor:"purple"})
} else {
sym.$(this).css({opacity:1,backgroundColor:"green"})
}
}