Discussion :

[dimebagplan]

Salut à tous !

J'aimerais faire quelque chose d'assez simple (je crois) , je pense que each pourrait être une solution à mon problème.

malheureusement, je n'arrive pas bien à l'exploiter.

J'ai une série de div qui porte le même 'id' boite.
Cette série est générer par une boucle while de php.

un peu comme àa :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div id="boiteEnsemble">			
<?php
        while ($donnees = mysql_fetch_array($reponse)){
?>
	<div id="boite"><?php echo $donnees['valueX'] ?></div>
<?php
        }
?>
</div>

J'aimerais lors d'un survol de ces boites effectuer un changement de couleur.
Pour 1 boite j'y arrive très bien !
Mais ça se complique lorsque j'essaie de le faire pour ma série de boites.

voici ce que j'ai tenté de faire sans succès...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
var group = $('boiteEnsemble').getElements('div[id=boite]');
group.each(function() {
	myEffect = new Fx.Morph(group, {duration: 500, fps:60, link: 'cancel', transition: Fx.Transitions.Cubic.easeOut});
	group.addEvent('mouseenter', rollOver);
	group.addEvent('mouseleave', rollOut);
});
function rollOver() {
	this.myEffect.start({
	'background-color': '#E6F1F5'
	});	
}
function rollOut() {
	this.myEffect.start({
	'background-color': '#000000'
	});
}

donc j'arrive bien à sélectionner toutes mes div avec l'id boite, mais après c'est au niveau de l'éffet myEffect.start que ça bloque.

Merci par avance de votre aide !

@+++

[Nighty]

Je ne suis pas sûr que ça règle ton problème totalement, mais déjà les id sont destinés à des éléments uniques Il ne peut donc y avoir qu'un seul id "boite" par document. Je te suggère de mettre un class="boite" à la place et de faire quelque chose comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$$('.boite').each(function(el) {
  // ... Traitement
});

Deuxième problème que je vois, tes fonctions rollOver font référence à this, or dans ce contexte this se réfèrera pas à ta boite... Pour ce faire, il faut effectuer un bind, c'est à dire lier l'objet désiré (l'élément représentant ta boite) via la méthode bind de la classe Function (merci Mootools !).

Ca se ferait un peu de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
$$('.boite').each(function(el) {
// Dans ce contexte el équivaut à la boite courante
el.addEvent('mouseleave', rollOut.bind(el)); // Grâce au bind, l'appel à rollOut pourra utiliser l'élément de la boite via this
}

Et surtout troisième problème, il y a une grosse erreur de logique !
Each fonctionne de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
objetATraverser.each(function(element, index) {
  alert('L\'index ' + index + ' vaut ' + element);
});

Each permet de boucler sur l'objet et de passer à une fonction la valeur de chaque élément et de l'index. Au sein de la boucle, this se réfère au tableau, et tu peux omettre le second argument si tu n'en as pas besoin.

Si tu regardes ton code, à chaque passage de la boucle, tu appliques un traitement au tableau et non à l'élément courant ce qui ne sert pas à grand chose.

Je pense que ton code devrait plus se rapprocher de ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$$('.boite').addEvent('mouseenter', function() {
// this ici représente l'élément de la boite, à toi de l'utiliser pour lancer l'effet voulu...
});

Si tu veux une explication, Mootools est très gentil et nous permet d'appliquer les méthodes propre à la classe Element directement sur une collection d'Elements, ce qui nous épargne une boucle. C'est gentil mais un peu sournois :
- On s'y perds vite quand on débute
- On arrive à faire 50 boucles à la suite pour s'épargner du code, si jamais on ne fait pas attention à comment Mootools fonctionne.

Désolé pour le pavé, j'espère que ça aidera un peu à éclaircir, et n'hésite pas à lire et relire la doc

[dimebagplan]

Mais au contraire !!
Merci pour le pavé fort en explications !

Effectivement, je ne savait même pas qu'on pouvais passer des éléments à each. aussi je ne comprenais pas l'utilité de 'bind'.

Je vais appliquer le code en fonction des explications !
Je te tiens au courant de l'évolution !

A très vite !

Et encore merci pour toutes les explications très utiles.

[dimebagplan]

Ça y est ! J'ai réussi à bien faire fonctionner tout ça.
Les deux pistes que tu m'a donné marche parfaitement.

Et surtout (Le plus important) c'est que j'ai vraiment compris le mécanisme cette fois ci.

Merci et @+ !

[Nighty]

Pas de quoi