[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)

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 !

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!

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