Question

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

当我点击更新按钮时，我基本上尝试创建编辑状态，并且这些按钮底部的所有文本都需要显示（段落元素）。虽然下面有一个带有文字的按钮，我想阻止它切换班级.hide。

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

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

如果你想离开＆＃34; ember＆＃34;单独的元素，然后

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

您还可以添加新课程，例如＆＃34; spareMe＆＃34;，并将其排除在.not（）

之后

切换相同的类名，除了一个（JavaScript）

1 个答案: