链接不带(Jquery)的HTML5 classList API [英] chaining HTML5 classList API without (Jquery)

问题描述

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

Is there a way to chain HTML5 classList API chaining?.

这不起作用

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

NOTE: NO jquery please

推荐答案

您可以使用可链接方法通过一个小对象创建可链接性:

You can create chainability via a little object with chainable methods:

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; }
  };

}

然后，您可以将自己的内心束缚在心上:

Then you can chain to your heart's content:

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

这篇关于链接不带(Jquery)的HTML5 classList API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！