Question

我有一个div：

<div class="modal" id="modal">

有时，它可能还有一个来自数组["success", "error", "warning"]

的类

如何检查元素是否包含该数组中的任何类并删除它们，而不删除modal类？

我正在做的是：

var modalAlertClasses = ['warning', 'error','success'];
var modal = document.getElementById('modal');    
for (var i = 0; i < modal.classList.length; i++) {
        if (modalAlertClasses.indexOf(modal.classList[i]) > -1) {
            modal.classList.remove[modal.classList[i]];
            console.log(modal.classList[i]);
            }
        }

但它不起作用。

Answer 1

您的代码使用以下

modal.classList.remove[modal.classList[i]];

但是.classList.remove是一个函数，所以应该写

modal.classList.remove(modal.classList[i]);

Answer 2

var modalAlertClasses = ['warning', 'error','success'];
var modal = document.getElementById('modal');    


modalAlertClasses.forEach(function(entry) {
    if( modal.classList.contains(entry)){
         modal.classList.remove(entry);
    }
});

<div class="modal warning error" id="modal">
  modal
</div>

Answer 3

最好的方式：

modal.classList.remove(...modalAlertClasses);

如果不支持 - 普通js：

modalAlertClasses.forEach(function(el) {
  modal.classList.remove(el);
});

Vanilla JS：检查元素classList是否包含数组中的值并将其删除

3 个答案: