资源

Question

我正在使用JS操作div上的类列表，添加一个带有随机数的类，例如zoom (players . singular (ix i))。

我基本上想在下次调用函数时“恢复”或“重置”类列表，重新添加另一个带有随机数的类，这样我就不会有多个类，例如{{ 1}}。最好的方法是什么？

这是我的笨拙尝试（不起作用）：

target--random-number-2

P.S。我正试图摆脱jQuery，所以没有jQuery回答。

Answer 1

您可以使用data-attributes存储当前的课程。
您可以动态创建data-attributes。

＆＃13;

function random_class_number() {
  var target = document.querySelector('#target');
  
  if (target.classList.contains('target-has-random-number')) {
    target.classList.add(...target.dataset.classes.split(/\s+/g));
    console.log('Contains');
  } else {
    console.log('Doesnt contain');
    // target.classList.value returns a string of the current classList collection.
    target.dataset.classes = target.classList.value.split(/\s+/g).join(' '); // This is to keep the initial classes separated by one space.
  }

  const random_number = Math.floor((Math.random() * 3) + 1);
  target.classList.add('target--random-number-' + random_number, 'target-has-random-number'); // You can pass multiple classes in one call of function 'add'.
}

random_class_number();
console.log(document.querySelector('#target'));

random_class_number();
console.log(document.querySelector('#target'));

＆＃13;

.initial-class:before {
  content: 'initial-class - '
}

.initial-class:after {
  content: ' - initial-class2'
}

＆＃13;

<div class='initial-class       initial-class2' id='target'>DIV</div>

＆＃13;

资源

Answer 2

感谢cBroe的建议，这就是我最终得到的东西，最终不会影响我现有的CSS。

function random_class_number(){
    const random_number = Math.floor((Math.random() * 3) + 1);
    document.querySelector('#target').dataset.javascript = 'target--random-number-' + random_number;
}

CSS

[data-javascript="target--random-number-1"] {
    background: red;
}

如何使用vanilla js恢复类列表

2 个答案:

资源