javascript - 切换除一个之外的相同类名 (JavaScript)

Question

我试图阻止类属性为“show”的段落元素在 updateButton 上的点击事件上切换。我尝试过 if else 语句但无济于事。

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

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

TLDR: 当我切换 中的所有其他段落元素时，我想防止没有 .hide 类属性的一个段落元素打开它.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');
            });
    });

您还可以添加新类，例如“spareMe”，并使用 .not() 将其排除