Discussion :

[Inccube]

Js n'est définitivement pas mon ami...

Je cherche à changer dynamiquement un background image de balises

Code :

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

<a class="upFleche">&nbsp;</a>

et

Code :

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

<a class="downFleche">&nbsp;</a>

selon si un élément se trouve en première ou dernière position.

J'ai systématiquement un is not defined, et je ne vois pas l'erreur. J'ai pourtant l'impression d'avoir fait les choses correctement selon la doc Mootools (v 1.2.5) (mais doute sur le getAllNext() après le getLast())

voici mon code js :

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
18
19
20
21
22
23
24
 
function blabla() {
            var TabU = $$('a[class=upFleche]');
            var TabD = $$('a[class=downFleche]');
            var x = 0;
            var z = 0;
 
            for (x=0; x<TabU.length; x++) {
                alert(TabU.length);
                var UpAFleche = TabU.getFirst();
                var OtherUp = TabU.getAllNext();
 
                UpAFleche.setStyle("background", "url('http://www.monsite.fr/images/arrow-g.png')");
                OtherUp.setStyle("background",   "url('http://www.monsite.fr/images/arrow.png')");
            }
            for (z=0; z<TabD.length; z++) {
                alert(TabD.length);
                var DownAFleche = TabD.getLast();
                var OtherDown = TabD.getAllNext();
 
                OtherDown.setStyle("background",  "url('http://www.monsite.fr/images/arrowd.png')");
                DownAFleche.setStyle("background","url('http://www.monsite.fr/images/arrowd-g.png')");
            }
}

Je n'ai bien sûr aucune idée à l'avance du nombre de <a> que j'aurais... An idea ?

[Angelblade]

Je comprends pas bien le but de la manœuvre mais:

Code :

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

1
2
3
 
var UpAFleche = TabU.getFirst(); // retourne le premier enfant de tabU
var OtherUp = TabU.getAllNext(); // retourne tout les frères après tabU

UpAFleche vaudras null si ton lien a n'a pas d'enfant.
OtherUp vaudras un tableau vide son ton lien n'a pas de frère après lui.

Sinon tu trouve pas fatiguant toutes ces majuscules dans tes noms de variables?
C'est difficile à lire, à écrire et les noms commençant par une majuscule sont généralement utilisés pour des objets/classes.

[Inccube]

merci pour ton retour.

Oui effectivement j'aurais (devrais) tout mettre en minuscule mais ma page ayant pas mal de lignes, je trouve ça plus lisible. (je pourrais toujours modiifer ca après).

J'ai systématiquement des enfants pour mon getFirst(). Ce que je ne comprends pas c'est que l'erreur JS d'après Firebug est au niveau de UpAFleche.setStyle(). Il me met à chaque fois un 'is not defined'...

Saurais tu d’où ça vient ?

[vermine]

Bonjour,

Je ne comprends pas bien non plus pourquoi vous bouclez sur le résultat du tableau. Vous ne désirez que le premier et le dernier élément, non ?

getLast devrait vous aider alors.

Et comme annoncé par Angelblade, getFirst n'est pas une méthode de Array mais d'un élément.

[Angelblade]

Si cela peut t'être utile

Code css :

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

1
2
3
4
5
6
ul li:first-child{
  color:red;
}
ul li:last-child{
  color:blue;
}

Code html :

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

1
2
3
4
5
<ul>
  <li><span>Premier</span></li>
  <li><span>Deuxième</span></li>
  <li><span>Troisième</span></li>
</ul>

Je n'ai pas bien saisi ton énnoncé, veux-tu modifier le background des a ayant la classe upfleche, puis des a ayant la classe downfleche?

PS: franchement! downfleche: downarrow ou flechebas mais pas downfleche

Sinon pour en revenir au javascript comme le dit vermine t'as un souci entre tableau et élément:

Tu boucle sur tabU avec: for (x=0; x<TabU.length; x++) {
ensuite tu appelle: var UpAFleche = TabU.getFirst();

getFirst est une méthode d'élément pas de tableau peut être voulait tu écrire TabU[x].getFirst()?
La raison pour laquelle firebug ne te donne pas d'erreur c'est que Mootools retourne un tableau ayant les méthodes des éléments mais quand tu appelle cette méthode, elle est en fait appelé sur chaque élément du tableau.
Avec un exemple:

Code html :

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

1
2
<div id="div1"><a id="a1"></a></div>
<div id="div2"><a id="a2"></a></div>

Code js :

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

1
2
3
4
5
var collection = $$('a'); // récupère tout les a de la page
var collectionParent = collection.getParent(); // récupère tout les parents des éléments de collection
 
// Contenu de collection: [a1, a2]
// Contenu de collectionParent : [div1, div2]

[Inccube]

Merci pour vos réponses qui me permettent d'avancer un peu

J'avais pensé à la solution du first-child en css mais les flèches haut et bas sont dans un td de ma table -> ce n'est pas adapté. Mais du coup je m’aperçois que je ne me suis pas bien expliqué.

Chaque flèche (haut/bas) permet de monter ou descendre une ligne de mon tableau (ca c'est ok). Lorsque la ligne en question est en première position j'aimerais que la flèche haute (dont l'image est un background-image) change. Et idem pour la flèche du bas (quand la ligne est en dernière position).

j'ai supprimé mon for et désormais lorsque je fais un

Code :

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

1
2
3
4
5
 
             $$('.upFleche').getfirst('a').setStyle("background-image", "url('http://www.monsite.fr/images/arrow-g.png')");
            $$('.upFleche').getAllNext('a').setStyle("background",   "url('http://www.monsite.fr/images/arrow.png')");
            $$('.downFleche').getLast('a').setStyle("background","url('http://www.monsite.fr/images/arrowd-g.png')");
            $$('.downFleche').getAllNext('a').setStyle("background",  "url('http://www.monsite.fr/images/arrowd.png')");

j'ai l'erreur "is not a function"

[vermine]

Vos sélecteurs vous renvoient des tableaux JavaScript. Ces tableaux contiennent les élément HTML <a>.
getFirst ne peut donc pas fonctionner ici. Et préciser ('a') encore moins vu que vous êtes déjà sur un <a>.
getAllNext ne convient pas non plus. Vous devez utiliser des méthodes de Array.

Je vous propose d'utiliser la méthode each qui permet d'appliquer une même fonction à tous les éléments du tableau :

Code :

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

1
2
3
4
5
6
7
8
 
//Passer en revue tout le tableau
$$('.upFleche').each(function(item, index){
    if(index == 0) //premier élément du tableau
        item.setStyle(...); 
    else //autres éléments du tableau
        item.setStyle(...); 
});

Pour la flèche du bas, on peut procéder plus ou moins de la même manière :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var downFleche = $$('.downFleche')
 
//Passer en revue tout le tableau
downFleche.each(function(item, index){
        item.setStyle(...); 
});
 
//Modifier l'aspect du dernier uniquement :
downFleche.getLast().setStyle(...);

[Inccube]

Mode boulet = OFF !!!

j'ai résolu mon souci grâce au message de vermine. En fait j'avais initialement commencé par ce type de script (each) mais je ne connaissais pas l'attribut "index" dans la fonction.

Merci a tous pour vos réponses pertinentes, j'ai pas mal appris avec vos différentes suggestions

Bonne journée à vous !!