链接HTML5 classList API没有(Jquery)

Question

有没有办法链接HTML5 classList API链接？

这不行

var sidebar = document.querySelector("#sidebar");

sidebar.classList.toggle("active").classList.remove("hover")

虽然这会奏效

var sidebar = document.querySelector("#sidebar");

sidebar.classList.toggle("active"); 
sidebar.classList.remove("hover")

注意:请不要jquery

Answer 1

您可以通过一个带有可链接方法的小对象创建可链接性:

function classList(elt) {
  var list = elt.classList;

  return {
      toggle: function(c) { list.toggle(c); return this; },
      add:    function(c) { list.add   (c); return this; },
      remove: function(c) { list.remove(c); return this; }
  };

}

那么你可以链接到你内心的内容:

classList(elt).remove('foo').add('bar').toggle('baz')