[Résolu] Jquery afficher des élements correspondants ...

Bonjour,

Pour faire simple, j'ai une liste d'images
et des div qui correspondent plus bas dans la page, qui sont masquées

(je ne peux pas les mettre à l'intérieur car elles prendraient la taille des <li> et elles doivent être beaucoup plus grandes)

J'ai nommé mes div avec une classe : oeuvre0, oeuvre1, oeuvre2 etc …

Y -a-t-il un moyen de dire que quand je clique sur li:eq(0), j'affiche la div "oeuvre0" et ainsi de suite ?

Merci d'avance

Merci beaucoup !

Ça marche très bien, c'est exactement ce que je voulais

@Gili : Ben la en fait je veux utiliser la fonction .slice de Array. Elle fait partie du prototype de Array donc je vais la chercher ou elle est rangée (je ne la trouverais pas à Array.slice), et ensuite il faut que je l'appelle mais elle ne prend pas de paramètres, elle s'éxecute par rapport à son contexte (le fameux this), qui doit être une collection. Du coup quand tu fais un .call( qqChose ), c'est comme si tu appelais la fonction en lui mettant this = qqChose. Ici c'est un trick pour convertir une HTMLCollection en tableau sans prendre 10 lignes.

Je n'ai pas compris ta remarque concernant querySelector, peux-tu préciser ?

Oui mais elle est accessible directement par array.slice. Du coup en passant par prototype tu perds le contexte et tu es obligé d'utiliser call()

    document.querySelector('div').addEventListener('click', function(e){
        var index = Array.slice( this.children ).indexOf( e.target );
        document.getElementById( 'oeuvre' + index ).style.color = 'red';
    }, false);

Pour le deuxième point je parlais juste du fait que l'HTML est balisé en div et que ton queryselector pointe sur un ul.

@Gili Faux, et faux , je m'explique :

• Le <li> sur lequel je clique et les <div id="oeuvre{N}"> sont deux éléments différents, non apparentés. Je t'invite à relire le sujet il y a clairement une liste d'item et plusieurs divs numérotées.

• Array.slice n'existe pas, la méthode slice est dans le prototype de Array, c'est à dire invocable par les instances de Array. À la limite au lieu de Array.prototype.slice on peut aussi faire un [].slice mais ça veut dire qu'on instancie un tableau inutilement. De plus appeler array.slice en lui passant en paramètre une HTMLCollection (comme fait dans ton bout de code) n'a aucun sens car les paramètres attendus sont début et fin.

Pour résumer

Array.slice            // => undefined, ça n'existe pas

Array.prototype.slice  // => la fonction slice de la classe Array

new Array().slice      // => la même chose sauf qu'on a instancié inutilement un tableau

[].slice               // => version raccourcie du précédent

Modifié par Freez (06 Feb 2015 - 13:25)

Merci pour ta réponse Freez.
- ah oui pour le li, ou avais-je la tête ?
- effectivement ça n'a aucun sens de faire un slice sur Array.

Mais le truc c'est que j'ai essayé en local console.log(Array) j'y retrouve bien slice() et quand je fais console.log(Array.slice) j'y retrouve bien une function et non undefined. et ceci fonctionne :

    document.querySelector('ul').addEventListener('click', function(e){
        var index = Array.slice( this.children ).indexOf( e.target );
        document.getElementById( 'oeuvre' + index ).style.color = 'red';
    }, false);

C'est pour cela que je posais la question ^^

@Gili : Oui en fait on a tous les deux raison, sur Firefox il les méthodes génériques pour les tableaux : c'est un raccourci qui te permet d'appeler directement la méthode du prototype en lui passant le contexte en premier paramètre. Sauf que c'est pas implémenté partout (le leader Chrome pour n'en citer qu'un) donc je préconise ça pour l'instant :

Array.prototype.{function}.call(context, [args ...])

Modifié par Freez (06 Feb 2015 - 14:57)

Ok merci beaucoup Freez, très instructif !