切换相同的 class 个名字，除了一个 (JavaScript)

Question

我正在尝试阻止具有 'show' 的 class 属性的段落元素在 updateButton 上的点击事件中切换。我试过 if else 语句但无济于事。

当我单击更新按钮并且这些按钮底部的所有文本都需要显示（段落元素）时，我实际上是在尝试创建一个编辑状态。虽然下面已经有一个带有文本的按钮，但我想防止切换 class .hide.

其他按钮已经具有 .hide class 属性，因此当从点击事件切换时，它们会出现。

TLDR: 我想防止没有 .hide class 属性的一段元素在什么时候切换我切换 .risk-text 容器中的所有其他段落元素。

// 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

取决于您的用例：

如果您只想排除它一次，然后将此元素与其他元素切换，请执行以下操作：

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

如果您想单独保留 "ember" 元素，则

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

您还可以添加新的 class，例如 "spareMe"，并使用 .not()

排除它

切换相同的 class 个名字，除了一个 (JavaScript)

Toggling same class names except for one (JavaScript)

javascript

toggle

state

editing