Javascript 如何使用vanilla js恢复类列表

我正在用JS操作一个div上的类列表，添加一个带有随机数的类，例如target-random-number-2

我本质上是想在下次调用函数时“还原”或“重置”类列表，以使用随机数重新添加另一个类，这样我就不会得到多个类，例如target-random-number-1 target-random-number-2 target-random-number-3。最好的方法是什么

以下是我笨拙的尝试，但没有成功：

function random_class_number(){
    // if we've changed the target...
    if (document.querySelector('#target').classList.contains('target-has-random-number')) {
        // restore the previous classlist
        document.querySelector('#target').classList = stored_classlist;
    } else {
        // if we haven't yet changed the target, store the classlist
        var stored_classlist = document.querySelector('#target').classList;
    }

    const random_number = Math.floor((Math.random() * 3) + 1);
    document.querySelector('#target').classList.add('target--random-number-' + random_number);
    document.querySelector('#target').classList.add('target-has-random-number');
}

---

另外，我正试图离开jQuery，所以请不要回答jQuery。

多亏了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;
}

可以使用数据属性存储当前类。 可以动态创建数据属性。 函数随机类数{ var target=document.querySelector'target'； 如果target.classList.包含“target-has-random-number”{ target.classList.add…target.dataset.classes.split/\s+/g； log'Contains'； }否则{ 控制台日志“不包含”； //target.classList.value返回当前类列表集合的字符串。 target.dataset.classes=target.classList.value.split/\s+/g.join“”；//这是为了将初始类用一个空格隔开。 } 常量随机数=Math.floorMath.random*3+1； target.classList.add'target-random-number-'+random_number，'target有随机数'；//一次调用函数'add'可以传递多个类。 } 随机类数； console.logdocument.querySelector'target'； 随机类数； console.logdocument.querySelector'target'； .第一节课：之前{ 内容：“初始类-” } .第一节课：之后{ 内容：'-initial-class2' }

---

div将原始值存储在其他自定义数据属性jQuery的.data中，然后从那里读回。实际上，我从未使用过数据属性。这是一个启示！虽然它不是我最初寻找的解决方案，但我认为它用最少的代码解决了我的问题。对于任何有类似问题的人，我会在下面的回答中发布我的解决方案。“虽然这不是我最初寻找的解决方案”-是的，我有点想。。。但这只是简单得多；-当然，您可以使用classList.remove来首先删除元素可能拥有的所有可能的target-random-number-x类，然后再添加一个新的随机类或类似的类。如果您需要更多的“级别”，比如说您添加了两个随机类，并且只想再次删除其中一个，那么这可能需要一种具有更复杂逻辑的不同方法。但是，由于您只想添加一个类，然后返回原始状态，因此存储原始类就更容易了。