javascript - classList.add()。如何插入变量而不是字符串？

Question

我正在尝试创建一个循环，每次执行时都会更改元素的类

HTML

<select class="form-control" id="FormControlSelect2" onchange="changeButtonColor2(this)">
<option value="Random1">Random</option>
</select>

JS

const all_buttons = document.getElementsByTagName('button');


function changeButtonColor2(buttonThingy) {
  if (buttonThingy.value === 'Random1') {
    buttonsRandom();
  }
}

function buttonsRandom() {
  for (let i=0; i < all_buttons.length; i++ ){
    all_buttons[i].classList.remove(all_buttons[i].classList[1]);
  }
  var choices = ['btn btn-primary', 'btn btn-success', 'btn btn-danger',
  'btn btn-warning','btn btn-secondary','btn btn-info', 'btn btn-dark',];
  var randomNumber = Math.floor(Math.random() * 7);
  var randomClass = choices[randomNumber];
  for (let i = 0; i < randomClass.length; i += 1) {
    all_buttons[i].classList.add(randomClass[i]);
}

}

JS 错误信息

InvalidCharacterError: The string contains invalid characters. (= last line of the JS code)

是否可以使用变量的输出？如果不是，解决方法是什么？请指教。

Answer 1

您的 choices数组，传递给 classList.add ， 是:

var choices = ['btn btn-primary', 'btn btn-success', 'btn btn-danger',
  'btn btn-warning','btn btn-secondary','btn btn-info', 'btn btn-dark',];

但是空格是类名中的无效字符。 classList.add当您尝试添加包含空格的单个类，而不是尝试添加两个单独的类时，将会看到这一点。将字符串分配给 className代替元素的(这也将覆盖任何以前的类名):

function buttonsRandom() {
  var choices = ['btn btn-primary', 'btn btn-success', 'btn btn-danger',
                 'btn btn-warning','btn btn-secondary','btn btn-info', 'btn btn-dark',];
  var randomNumber = Math.floor(Math.random() * 7);
  var randomClass = choices[randomNumber];
  for (let i = 0; i < randomClass.length; i += 1) {
    all_buttons[i].className = randomClass[i];
  }
}

虽然您可以使用 classList.add 添加多个类通过传递额外的参数(在比 IE11 更新的浏览器上)，例如

all_buttons[i].classList.add(...randomClass[i].split(' '));

对于这种情况，这太过分了(并且需要您事先单独清除这些类)。