我将如何在 vanilla js 中编写这个 JQuery addClass 方法答案

【问题标题】：How would I write this JQuery addClass method in vanilla js我将如何在 vanilla js 中编写这个 JQuery addClass 方法
【发布时间】：2014-11-02 02:00:26
【问题描述】：

那我该怎么写

$('div').addClass('border1');

在 Vanilla javascript 中，我的 add 类方法会是什么样子。到目前为止，我所拥有的是，

function addClass(x,y) {
    x.className += " " + y;
}

但我知道这是错误的，因为参数已关闭。我真的迷路了。

【问题讨论】：

你为什么认为这是错误的？
如果 x 是一个 DOM 元素，它看起来是正确的。
因为 $('div').addClass('border1'); 的格式所以我的方法id格式为“方法（参数，参数）”，但调用函数中的方法格式为parameter.method（参数）
x和y的值是多少？
x 应该是 div，y 应该是border1

标签： javascript jquery

【解决方案1】：

让我们仔细看看 jQuery 在这里做了什么。

$('div')是什么意思？

在 jQuery 术语中，它表示 “选择文档中的所有 'div' 元素”。
$('div') 是一个 jQuery 对象，它代表文档中的所有 div 元素。但在这段代码中，您没有专门针对单个 DOM 元素。

让我们编写我们自己的简化选择对象“MySelect”：

/**
 * `MySelect` object constructor.
 */
function MySelect(selector){
    this.elementList = document.querySelectorAll(selector);
}

现在让我们使用它：

var divs = new MySelect('div');
divs.elementList; // all `div` elements in the document.

（注意querySelectorAll是原生javascript DOM方法）

现在我们有了一个元素选择对象，让我们为其添加一个addClass 方法：

/**
 * Add the specified class to all elements selected by this object.
 */
MySelect.prototype.addClass = function(cls){
    var i, e;
    for (i = 0; i < this.elementList.length ; i++){
        e = this.elementList[i];
        e.className += " " + cls;
        // can also use e.classList.add
    }
}

瞧：

divs.addClass('xyz');

这就是 jQuery 的工作原理。

对于$ 语法，您可以这样做：

function $(selector){
    return new MySelect(selector);
}

照常使用：

$('div').addClass('xyz');

【讨论】：

【解决方案2】：

element.classList 是 vanillaJS 的做法

var x = document.getElementById('x');
var y = document.getElementById('y');
var z = document.getElementById('z');

y.addEventListener('click',function(){

  x.classList.add('blue');

});

z.addEventListener('click',function(){

  x.classList.toggle('blue');

});

#x {
  width: 50px;
  height: 50px;
  border: 1px dotted gray;
}

.blue {
  background-color: blue;
}

<div id="x"></div>

<button id="y">add the class</button>
<button id="z">toggle the class</button>

【讨论】：

是的，所以我明白你在做什么，但我的问题是我将如何编写 addClass 方法。

【解决方案3】：

如果你的目标是 IE10+，你可以使用

 var el = document.getElementById("someId");
 el.classList.add(className);

适用于所有浏览器：

if (el.classList)
   el.classList.add(className);
else
   el.className += ' ' + className;

来源： http://youmightnotneedjquery.com/#add_class

【讨论】：

我将如何在方法中做到这一点......它必须在 addClass 方法中完成。

【解决方案4】：

function addClass(selector, class) {
    els = document.querySelectorAll(selector);
    for (var i = 0; i < els.length; i++) {
        els[i].className += class;
    }
}

那么你可以这样做：

addClass('div', 'border1');
addClass('#someID', 'someclass');
addClass('.someClass', 'someotherclass');

【讨论】：

当我添加类时，它必须采用确切的格式，就像我在 jquery 中那样，所以你的方式不是真的有效！... :(
如果你想像jQuery那样做，你必须定义一个类。这比我想来这里要复杂。
为什么必须是相同的格式？您是否尝试在不实际重写使用它的代码的情况下替换 jQuery？
是的，这就是作业的确切描述。 c) 添加一个新方法：addClass('newclass') " 添加一个新方法，它将给定的 CSS 类添加到与选择器匹配的每个元素。例如：$('div').addClass('foo') ; 应该将 CSS 类 'foo' 添加到页面上的每个
元素，就好像它们被声明为
"
如果问题说这是一项作业，并且目标是关于学习如何编写 Javascript 类，那就太好了。但是班上没有教这个吗？如果没有，您希望如何完成作业？