[Résolu] Ajouter AddClass à l'élément ayant la même classe

Bonjour,

j'ai un code comme suit :

<div id="images">
<img src="coucou.jpg" class="item item-coucou">
<img src="hi.jpg" class="item item-hi">
<img src="salut.jpg" class="item item-salut">
<img src="adi.jpg" class="item item-adi">
</div>

<ul>
<li class="item item-coucou">Coucou !</li>
<li class="item item-hi">Hi !</li>
<li class="item item-salut">Salut !</li>
<li class="item item-adi">Adi !</li>
</ul>

Je souhaite que lorsque je survole une image, je puisse ajouter une classe au <li> ayant la même classe que l'image survolée... Je brasse la doc mais je n'ai pas trouvé comment retrouver un élément qui commence par item- et avec la suite en caractères.

$(function() {
    $('.item').hover(
		
    function() {
        $(this).addClass('hover');
    },
        
    function(){ 
        $(this).removeClass('hover');
    }
);
	
    $('.item.hover').trigger('mouseenter');    
});

Merci pour le retour

Lettynoo a écrit :
Je n'ai pas trouvé comment retrouver un élément qui commence par item- et avec la suite en caractères.

Bonjour. Pour le code par lui-même, à moins que vous ayez besoin de jQuery par ailleurs, vous pouvez vous en tirer facilement en javascript vanilla. Sinon votre question appelle à une réponse uniquement basé sur CSS. Voici le sélecteur adéquat :

[class*=item-]

Edit : j'avais fais une erreur de syntaxe avec l'astérisque.
Modifié par Olivier C (02 May 2022 - 20:35)

Eh bien c'est vrai que je n'ai pas précisé mais je préfère VanillaJS j'essaie de me passer de Jquery.

Je vais tester la solution apportée. Mais en JS n'y a t'il pas une idée pour ajouter une classe "Maclasse" quand il y a un hover ?

Lettynoo a écrit :
... j'essaie de me passer de Jquery.

Je suis passé par là moi aussi et j'avais eu du mal. Maintenant c'est un plaisir et je n'utilise même plus que ça, même en backend (avec Node.js).
Donc, je ne suis pas en mesure de donner une réponse complète car je ne suis au travail jusque tard ce soir. Mais voilà une piste :

const addClassHover = (() => {
  document.querySelectorAll('[class*=item-]').forEach(
    el => el.addEventListener('mouseenter', function(event) {
      event.target.classList.add('test')
    })
  )
})()

Modifié par Olivier C (03 May 2022 - 04:49)

Merci c'est cool, je vais tester Bon courage !

En alternative à .classList.add, en fonction de ce que vous voulez obtenir, vous pouvez aussi utiliser .classList.toggle.
Un exemple en ligne : Codepen
Modifié par Olivier C (03 May 2022 - 11:28)

Petit retour, malheureusement avec la class css cela ne marche pas, pour simple raison qu'il n'y a pas de valeur enfant/parent. Si l'image est survolée cela ne peut pas faire réagir mon li ayant la même classe. De plus, [class*=item-] sélectionne tous les éléments qui commencent par item-.

Retour à la case départ !

Bonjour,

L'idée est à peu près similaire, mais en comparant classList. Ex: https://jsfiddle.net/tqw3avdu/2/

Cette exemple reste très rigide, si les class sont inversées ou qu'il y en a une de plus, il n'y a plus de concordances. L'idéal serait une comparaison conditionnelle. Cela reste une piste.
Cordialement
Modifié par gcyrillus (03 May 2022 - 16:05)

Salut,

je n'ai pas trouvé comment sauvegarder sur le codepen d'olivier mais j'arrive à ce javascript la :

const addClassHover = (() => {
  document.querySelectorAll('img[class*=item-]').forEach(
    e => {
    //console.log(Array.from(e.classList).filter(classItem => {classItem.startsWith("item-")}));
      let classItemName = [...e.classList].filter(classItem => {
      //console.log(classItem.startsWith("item-"));
        return classItem.startsWith("item-")});
      //console.log(classItemName);
      classItemName.forEach(cIN => {
        document.querySelectorAll('li[class*='+cIN+']').forEach(
          f => {  
            e.addEventListener('mouseenter', function(event) {
              f.classList.toggle('test')
            })        
          })
      })
    })
})()

En très gros pour l'algo :
- je récupère les images qui ont un "item-" ,
- je bidouille la classList pour ne récupérer que les classes qui commencent par "item-"
- je boucle pour si une image a plusieurs "item-" (ça fait un effet bizarre mais ça évite que ça plante)
- je récupère les li qui ont ces classes la et je pose des listeners dessus (comme faisait olivier)

Il y a une utilité/nécessité à ce que l'on passe obligatoirement par des classes css ?
J'aurai bien vu un traitement avec des "data-" plutôt que des classes

Pour les data, c'est pareil, il faut parcourir les éléments et les extraire, l'avantage c'est qu'il seront plus fiable et uniquement dédiés à ton script. Je dirais go!

Je pose la question à l'auteur parce que les data-elements me semblent plus adaptés que les classes
Je me dis qu'on doit même pouvoir essayer de simplifier un peu en faisant des associations via des ids sur les li

Pour avancer j'ai fait un bête, ça va qu'il y en a pas des tonnes...

$(function() {
    $('.item-coucou').hover(
    function() {
        $("li.item-coucou").addClass('active');
    },  
    function(){ 
        $("li.item-coucou").removeClass('active');
    }
    );
});

$(function() {
    $('.item-hi').hover(
    function() {
        $("li.item-hi").addClass('active');
    },   
    function(){ 
        $("li.item-hi").removeClass('active');
    }
    );
});

Mais j'avoue j'ai pas du tout pensé aux datas, c'est pas devenu un automatisme my bad, j'aurais gagné beaucoup de temps plutôt que me torturer avec quelque chose de complexe.

Merci beaucoup pour les solutions diverses, je vais les garder dans un dossier et me les remémorer si je reviens à en avoir besoin. Ou bien mettre les datas pour alléger mon code JS (oui ça sera sans doute mieux).

Vous êtes au top

C'est cool que les alsanautes aient pu intervenir. J'ai vu passer les commentaires, mais je n'étais pas dispo et ne serais sans doute pas allé aussi loin.
Bonne continuation à tous.