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')

Answer 2

要使链接起作用，方法必须返回要链接的对象。由于.classList方法不返回classList对象或DOM对象，因此您无法原生地与它们链接。

当然，您可以编写自己的方法并让它们返回相应的对象，从而以可链接的方式重新实现功能，但是您必须将它们放在系统原型上才能使用他们很容易。

如果不重新实现可链接的方法，您可以稍微缩短代码：

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

sidebarList.toggle("active"); 
sidebarList.remove("hover");

如果要在实际的HTML5对象上添加可链接的方法，可以这样做：

(function() {
    var p = HTMLElement.prototype;
    p.clAdd = function(cls) {
        this.classList.add(cls);
        return this;
    };

    p.clRemove = function(cls) {
        this.classList.remove(cls);
        return this;
    };

    p.clToggle = function(cls) {
        this.classList.toggle(cls);
        return this;
    }
})();

// sample use
document.querySelector("#sidebar").clAdd("active").clRemove("inactive");

工作演示：http://jsfiddle.net/jfriend00/t6w4aj0w/

或者，如果你想要一个.classList类型的界面，你可以这样做：

Object.defineProperty(HTMLElement.prototype, "classListChain", {
    get: function() {
        var self = this;
        return {
            add: function(cls) {
                self.classList.add(cls);
                return self;
            },
            remove: function(cls) {
                self.classList.remove(cls);
                return self;
            },
            toggle: function(cls) {
                self.classList.toggle(cls);
                return self;
            }
        }
    }
});

// sample use
document.querySelector("#sidebar").classListChain.add("active").classListChain.remove("inactive");

工作演示：http://jsfiddle.net/jfriend00/pxm11vcq/

仅供参考，因为这两个选项都链接了实际的DOM元素（与链接自定义对象的torazaburo方法不同），您可以在最后添加DOM元素方法/属性，如下所示：

el.classListChain.add("active").style.visibility = "visible";

或者，您可以这样做：

var el = document.querySelector("#sidebar").classListChain.add("active");

Answer 3

如果你只支持现代浏览器，链接是jQuery仍然支持vanilla JavaScript的罕见优势之一，但这不应该阻止你。与上面建议的@jfriend00一样，您可以创建自己的添加/删除/切换方法，只需返回this对象即可链接。

他们是：

Element.prototype.addClassC = Element.prototype.addClassC || function (htmlClass) {
    this.classList.add(htmlClass);
    return this;
}
Element.prototype.removeClassC = Element.prototype.removeClassC || function (htmlClass) {
    this.classList.remove(htmlClass);
    return this;
}
Element.prototype.toggleClassC = Element.prototype.toggleClassC || function (htmlClass) {
    this.classList.toggle(htmlClass);
    return this;
}

在你的情况下，你会像这样应用它们：

sidebar.toggleClassC('active').removeClassC('hover');

关于命名的说明。我建议不要简单地使用addClass和removeClass因为那些可能与jQuery自己的方法冲突，或者有人读取代码会将它们误认为jQuery的方法。在这里我添加了一个代表Chaining的C，但是你可以将它命名为对你更有意义的东西。

修改：我添加了一项检查，以确保我们的方法之前尚未定义，以避免覆盖。我还将类变量名从cssClass切换到htmlClass，因为这更正确（html有类，css有选择器）。

链接HTML5 classList API没有（Jquery）

3 个答案: