Question

我正在尝试在单击事件中更改多个同级的类，其中一些可能每个类都有多个类，但是我要更改的类始终是第一个，因此这就是我所附带的

let classList = event.currentTarget.classList;
    if (classList[0] === 'open'){
      classList[0] = 'close';
      event.currentTarget.classList = classList;
      return;
    }
    let sibllingList = event.currentTarget.parentElement.children;
    for (let i=0;i<sibllingList.length;i++) {
      classList = sibllingList[i].classList;
      if (classList[0] === 'open') {
        classList[0] = 'close';
        sibllingList[i].classList = classList;
        break;
      }
    }
    classList = event.currentTarget.classList;
    if (classList[0] === 'close'){
      classList[0] = 'open';
      event.currentTarget.classList = classList;
    }

当我使用单个类并使用className而不是classList时，此方法有效，并且该功能正常运行，但是当我将其切换到classList时，它不起作用并引发以下错误

未捕获的TypeError：无法在'DOMTokenList'上设置索引属性：不支持索引属性设置器。

Answer 1

classList是只读属性。因此，您无法为其分配值。因此，您会收到错误消息：

未捕获的TypeError：无法在'DOMTokenList'上设置索引属性：不支持索引属性设置器。

您需要添加类：

event.currentTarget.classList.add('close')

要删除该类，请使用remove：

event.currentTarget.classList.remove('open')

这样，您无需检查一流的名称。它将添加/删除所需的className。

注意：删除不存在的类不会引发错误。

或者，您可以只使用replace：

event.currentTarget.classList.replace('open', 'close')

Answer 2

这是一个尝试看看

var classList = test.classList;
    if (classList[0] === 'open'){
        test.classList.replace('open', "close");
      //event.currentTarget.classList = classList; // dont need this 
    }
    console.log( test.classList)

<div id="test" class="open b test"> <div/>

更改classList会导致Uncaught TypeError未能设置索引属性

2 个答案: