замена jQuery на родной Javascript при работе с классами CSS

198

03 января 2019, 12:00

Изучаю вопрос перехода от jQuery к родному Javascript. Подскажите, правильно ли я понимаю, что особенность jQuery в последовательном применении функций к одному объекту в JS пока нет, т.е.

из кода jQuery

$('#content')
    .removeClass('edit-error')
    .removeClass('edit-complete')
    .toggleClass('edit-error', this.m_pageData.is_wrong_text)
    .toggleClass('edit-complete', this.m_pageData.is_completed_text);

к коду Javascript

document.querySelector('#content').classList
    .remove('edit-error')
    .remove('edit-complete')
    .toggle('edit-error', this.m_pageData.is_wrong_text)
    .toggle('edit-complete', this.m_pageData.is_completed_text);

не перейти :(

да и toggle как-то не так работает

Answer 1

Поскольку методы .classList не возвращают объект classList или объект DOM, вы не можете связать с ними цепочку.

Вы можете создать цепочки с помощью небольшого объекта с цепными методами:

function classList (el) { 
  const list = el.classList 
 
  return { 
    toggle (c) {  
      list.toggle(c)  
      return this  
    }, 
    add (c) {  
      list.add(c)  
      return this  
    }, 
    remove (c) {  
      list.remove(c)  
      return this  
    } 
  } 
} 
 
const el = document.querySelector('#content') 
 
classList(el).remove('foo').add('bar').toggle('baz') 
 
console.log(el.className)