Activer/désactiver les noms de même classe sauf un (JavaScript)

Question

J'essaie d'empêcher un élément de paragraphe avec un attribut de classe de 'show' de basculer sur l'événement click sur updateButton . J'ai essayé d'autres déclarations mais en vain.

Je suis essentiellement en essayant de créer un état d'édition lorsque je clique sur le bouton de mise à jour et tout le texte sur le bas de ces boutons doit montrer (les éléments de paragraphe). Bien qu'il y ait déjà un bouton avec le texte en dessous que je veux empêcher de basculer la classe .hide.

Les autres boutons ont déjà l'attribut de classe .hide sur eux déjà lorsqu'ils sont basculés de l'événement click, ils apparaissent.

TLDR: Je veux empêcher un élément de paragraphe sans attribut class .hide de basculer sur quand je bascule tous les autres éléments de paragraphe dans le .risk texte contenant.

// select indicator div 
 
const riskIndicator = document.getElementById("Risk__indicator"); 
 
// select update button 
 
const updateButton = document.getElementById("Update_button"); 
 
// Indicator buttons 
 
const indicatorButton = document.getElementsByClassName("Risk_indicator_button"); 
 
// Indicator 'check every..' text 
 
const checkIndicatorText = document.querySelectorAll(".risk-text"); 
 

 

 
    // select update button 
 
     updateChange: updateButton.addEventListener("click", function (event) { 
 
      riskIndicator.classList.toggle("active"); 
 
     }); 
 

 
    // If statement to check whether the Risk Indicator is active to apply background changes 
 
     editState: updateButton.addEventListener("click", function(el) { 
 
       [].map.call(document.querySelectorAll('.risk-text'), function(el) { 
 
        // loop through text indicator elements checking to see if it's got a hidden class attribute 
 
        el.classList.toggle('hide'); 
 
       }); 
 
     });

Answer 1

En fonction de votre cas d'utilisation:

Si vous voulez exclure une seule fois, puis basculer cet élément avec les autres, faire quelque chose comme:

editState: updateButton.addEventListener("click", function(el) { 
      [].map.call(document.querySelectorAll('.risk-text:not(.hide)'), function(el) { 
       // loop through text indicator elements checking to see if it's got a hidden class attribute 
       el.classList.toggle('hide'); 
      }); 
    }); 

Si vous voulez laisser l'élément "braise" seul, alors

editState: updateButton.addEventListener("click", function(el) { 
      [].map.call(document.querySelectorAll('.risk-text:not(.low_risk_text__wrap--risk-middle-amber)'), function(el) { 
       // loop through text indicator elements checking to see if it's got a hidden class attribute 
       el.classList.toggle('hide'); 
      }); 
    }); 

Vous pouvez également ajouter une nouvelle classe, comme "spareMe", et d'exclure avec .pas()