切換相同的類名除了一個（JavaScript）

我試圖防止具有'show'類屬性的段落元素在updateButton上點擊事件。我試過如果其他的陳述，但無濟於事。切換相同的類名除了一個（JavaScript）

我本質上是試圖創建一個編輯狀態，當我點擊更新按鈕和這些按鈕底部的所有文本需要顯示（段落元素）。雖然已經有一個按鈕，下面有文本，我想阻止切換類.hide。

其他按鈕已經有了.hidden它們的class屬性，所以當它們從click事件中切換時，它們就會出現。

TLDR：我想，以防止沒有.hide類屬性的一個段落元素的切換，當我切換所有在。風險文本容器中的其他段落元素上。

// 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'); 
 
       }); 
 
     });

來源

2017-05-22 Harry

份額HTML代碼 – brk

的HTML它 https://jsfiddle.net/gxhsz8ky 圖片排除http://imgur.com/a/Q8oye – Harry

根據你的使用情況：

如果要排除它只有一次，然後切換與他人這個元素，這樣做：

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'); 
      }); 
    });

如果你想單獨留下「燼」元素，那麼

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'); 
      }); 
    });

您還可以添加新的類，如「spareMe」，並用。不是（）

來源

2017-05-22 15:09:22

非常感謝Michal，第一個做了我想要做的事！它現在可以成功地防止中間段落元素切換hide類屬性！我有那裏的.show類屬性，我不想改變，所以我修改成這樣。 https://jsfiddle.net/mcLouxr4/1/ – Harry

切換相同的類名除了一個（JavaScript）

回答

相關問題