Изменение classList приводит к Uncaught TypeError Не удалось установить индексированное свойство

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, он не работал и выдал следующую ошибку

Uncaught TypeError: Не удалось установить индексированное свойство для 'DOMTokenList': установщик свойства индекса не поддерживается.

Answer 1

Вот попробуй взгляни

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

Answer 2

classList - свойство только для чтения.Таким образом, вы не можете присвоить ему значение.Итак, вы получаете сообщение об ошибке:

Uncaught TypeError: Не удалось установить индексированное свойство для 'DOMTokenList': установщик свойства индекса не поддерживается.

Вы будетевместо этого нужно добавить класс:

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

Чтобы удалить класс, используйте remove:

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

Таким образом, вам не нужно проверять имя первого класса.Он добавит / удалит требуемое имя класса.

Примечание. Удаление несуществующего класса НЕ приводит к ошибке.

Или вы можете просто использовать replace:

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