seulement une classe javascript clear sélectionnée à partir d'autres éléments

Question

J'ai un bloc d'images que j'utilise css et JavaScript pour changer l'apparence de hover, et je veux aussi qu'elles soient sélectionnables.

La classe principale de mes images est "MAIN", elles s'affichent toutes en niveaux de gris. Lorsqu'elles sont cliquées, elles deviennent "SÉLECTIONNÉES" et sont colorées. Je voudrais pouvoir enlever la classe de "SELECTED" de n'importe quelle autre image quand on clique sur la suivante, de sorte que seulement 1 soit sélectionné/en couleur à la fois.

Voici un exemple de mon code:

function SelAdobe() { 
 
    document.getElementById("Adobe").className = "SELECTED"; 
 
    document.getElementById("AddSource").innerHTML = 'Add Adobe'; 
 
}

img.MAIN { 
 
    width: 80px; 
 
    -webkit-filter: grayscale(1); 
 
    filter: grayscale(1); 
 
} 
 

 
img.MAIN:hover { 
 
    -webkit-filter: grayscale(0); 
 
    filter: grayscale(0); 
 
} 
 

 
img.SELECTED { 
 
    width: 80px; 
 
    -webkit-filter: grayscale(0); 
 
    filter: grayscale(0); 
 
}

<a href="#" onClick="SelAdobe()"> 
 
    <img src="//lorempixel.com/80/80/cats/3" id="Adobe" class="MAIN"> 
 
</a>

Puis-je mettre quelque part ici pour vérifier et supprimer toutes les images précédentes avec la classe « selected » quand une image est cliqué ?

Answer 1

J'ai légèrement modifié votre structure HTML, j'ai enveloppé les images dans un seul div et l'utiliser pour écouter l'événement click. Il réduit le nombre d'écouteurs d'événements et si vous souhaitez changer le nom de la méthode, vous n'avez pas à apporter de nombreux changements à votre code HTML. De plus, vous pouvez vérifier s'il y a un objet dans la galerie avec la classe SELECTED et le retirer de cet élément avant de l'affecter à un nouvel élément. Lorsqu'il n'y a aucun élément avec la classe SELECTED, la méthode querySelector renvoie null, alors assurez-vous de vérifier cela.

const 
 
    gallery = document.getElementById('gallery'); 
 
    
 
function onClickHandler(event) { 
 
    if (event.target.tagName.toLowerCase() !== 'img') { 
 
    return; 
 
    } 
 
    
 
    const 
 
    selectedImage = gallery.querySelector('.SELECTED'); 
 
    if (selectedImage !== null) { 
 
    selectedImage.classList.remove('SELECTED'); 
 
    } 
 
    
 
    event.target.classList.add('SELECTED'); 
 
} 
 
    
 
gallery.addEventListener('click', onClickHandler);

img.MAIN { 
 
    width: 80px; 
 
    -webkit-filter: grayscale(1); 
 
    filter: grayscale(1); 
 
} 
 

 
img.MAIN:hover { 
 
    -webkit-filter: grayscale(0); 
 
    filter: grayscale(0); 
 
} 
 

 
img.SELECTED { 
 
    width: 80px; 
 
    -webkit-filter: grayscale(0); 
 
    filter: grayscale(0); 
 
}

<div id="gallery"> 
 
    <img src="//lorempixel.com/80/80/cats/3" id="Cat1" class="MAIN"> 
 
    <img src="//lorempixel.com/80/80/cats/4" id="Cat2" class="MAIN"> 
 
    <img src="//lorempixel.com/80/80/cats/5" id="Cat3" class="MAIN"> 
 
</div>

Answer 2

cela devrait vous aider:

function onImageClick(event) { 
 
    const selectedCls = 'selected'; 
 
    
 
    Array 
 
    .prototype 
 
    .forEach 
 
    .call(document.querySelectorAll('#test .selectable'), (
 
     image => image !== event.target 
 
     ? image.classList.remove(selectedCls) 
 
     : image.classList.add(selectedCls) 
 
    )) 
 
    ; 
 
} 
 

 
document 
 
    .querySelector('#test') 
 
    .addEventListener('click', (
 
    event => event.target.classList.contains('selectable') && 
 
    onImageClick(event) 
 
)) 
 
;

.selectable { 
 
    cursor: pointer; 
 
    opacity: .3; 
 
    transition: 300ms opacity linear; 
 
} 
 

 
.selectable:hover { 
 
    opacity: .8; 
 
} 
 

 
.selectable.selected { 
 
    opacity: 1; 
 
}

<div id="test"> 
 
    <img class="selectable" src="http://lorempixel.com/50/50/sports/1" /> 
 
    <img class="selectable" src="http://lorempixel.com/50/50/sports/2" /> 
 
    <img class="selectable" src="http://lorempixel.com/50/50/sports/3" /> 
 
    <img class="selectable" src="http://lorempixel.com/50/50/sports/4" /> 
 
    <img class="selectable" src="http://lorempixel.com/50/50/sports/5" /> 
 
    <img class="selectable" src="http://lorempixel.com/50/50/sports/6" /> 
 
</div>

Answer 3

Bien sûr. Supprimez simplement la classe de toute image qui l'a dans la ligne avant d'ajouter la nouvelle classe SELECTED.

function SelAdobe() { 
 
    var selectedImages = document.querySelector("img.SELECTED"); 
 
    if (selectedImages) { 
 
     selectedImages.classList.remove("SELECTED"); 
 
    } 
 
    document.getElementById("Adobe").className = "SELECTED"; 
 
    document.getElementById("AddSource").innerHTML = 'Add Adobe'; 
 
}

img.MAIN { 
 
    width: 80px; 
 
    -webkit-filter: grayscale(1); 
 
    filter: grayscale(1); 
 
} 
 

 
img.MAIN:hover { 
 
    -webkit-filter: grayscale(0); 
 
    filter: grayscale(0); 
 
} 
 

 
img.SELECTED { 
 
    width: 80px; 
 
    -webkit-filter: grayscale(0); 
 
    filter: grayscale(0); 
 
}

<a href="#" onClick="SelAdobe()"> 
 
    <img src="//lorempixel.com/80/80/cats/3" id="Adobe" class="MAIN"> 
 
</a>