Bonjour,

J'ai pour but d'afficher sous forme d'hover les thumbnails de mes articles, pour cela je créer mouseover puis un mouseout, le tout fonctionne correctement. La partie où je coince, c'est lorsque j'ai plusieurs articles comment faire ?

Ce que je fais

https://jsfiddle.net/vguce8zk/

Je pensais à faire une boucle, mais je devrais donc faire fonctionner le système avec des ID (<article id="159">)

Comment procederiez-vous ?

6 réponses


Le soucis c'est que tu réutilises le selector d'origine.
Hors, une fois que tu es dans le mouseover, tu dois utiliser l'élément en cours que tu retrouveras, dans le cas présent avec $(this)
$(this).addClass('thumb-active');
Sache également qu'il existe "toggleClass" qui devrait t'être utile.

Muxabble
Auteur

Salut @Kenor, la function fonctionne très bien comme elle est actuellement, je vais voir pour utiliser un toggleClass qui utiliserais moins de code, mon problème étant de faire un foreach :O

... si tu le dis

Ce que Kenor te disait te permet de créer un fonction générique que tu pourra utiliser pour autant d'items que tu aura besoins !

Muxabble
Auteur

J'avais pas compris du tout le message comme ça :O très bien, mais comment faire la cfonction générique ? Je doit utiliser une classe générique obligatoirement ? Impossible d'utiliser les ID ?

Pour faire générique, il faudrait mettre le nom de la class à ajouter/supprimer dans un attribut data (du style data-add-class=".maClass")
Il me semble que dans les messages récents de JeremieMeunier, il a fournit le code en question sur un autre sujet.

Sinon, en soit, ce n'était pas réellement mon propos.

Il faut que tu saches que chaque plugin / fonction jQuery fait systématiquement un "forEach" ($(selector).each(...)) donc il est inutile de le faire toi même. Par contre, tu dois bien utiliser $(this) pour que ça fonctionne. Test ... tu constatera par toi même, ou regarde le code source de jQuery pour le constater.