Question

我决定脱掉我的jQuery教练轮并尝试一些原生的JS。这是......教育。

无论如何，这就是我想要模仿的东西：

$('.select_me').addClass('give_me more_classes');

到目前为止，我已经想出了如何选择元素并为它们添加单个类。我遇到的问题是使用数组向元素添加多个类。

这是我尝试过的：

// Select the element
var div = document.querySelector('.select_me');

// Create an array with the classes to add
var classArray = ['give_me', 'more_classes'];

// Apply the new classes.
div.classList.add('just_a_test', 'okay'); // Works, but not what I want.
div.classList.add.apply(null, classArray); // Uncaught TypeError: Illegal invocation

我怀疑我使用apply()错误，但我还不知道如何正确使用它。你们其中一个好人可以教育我，还是指出我正确的方向？

的jsfiddle：
https://jsfiddle.net/peg8zrw7/2/

Answer 1

.add()方法的上下文非常重要。使用null无法正常工作，因为add将不知道要操作什么。

请改为：

var cl = div.classList;
cl.add.apply(cl, classArray);
// ----------^-- sets the `this` value of the `.add()` method

＆＃13;

// Select the element
var div = document.querySelector('.select_me');

// Create an array with the classes to add
var classArray = ['give_me', 'more_classes'];

// Apply the new classes.
var cl = div.classList;
cl.add('just_a_test', 'okay');
cl.add.apply(cl, classArray);

＆＃13;

div {
    width: 100px;
    height: 100px;
    background-color: #eeeeee;
}

.select_me.just_a_test.okay {
    border: 2px solid #000000;
}

.select_me.give_me {
    background: #666666;
}

.select_me.more_classes {
    border-radius: 50% 0px 50% 0px;
}

＆＃13;

<div class="select_me"></div>

＆＃13;

请注意，在ECMAScript 6（目前在Firefox中）中，您将能够执行此操作：

div.classList.add(...classArray);

Answer 2

在vanilla JavaScript中执行更多操作的最佳方法是始终查看Mozilla developers网站或youmaynotneedjquery

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

这个简单的语句可以在函数内部实现，并创建自己的代码库，以避免使用jQuery。

JS - 向元素添加类数组

2 个答案: