在 mouseleave 上删除除 Javascript 中的所有类之外的所有类 [关闭]答案

【问题标题】：Remove all classes except one in Javascript on mouseleave [closed]在 mouseleave 上删除除 Javascript 中的所有类之外的所有类 [关闭]
【发布时间】：2021-08-03 13:19:37
【问题描述】：

我想删除除 dpkCursor 之外的所有类

<div class="dpkCursor active disk"></div>

我在 mouseenter 上重置它

   target.addEventListener("mouseleave", resetCursor);


   function resetCursor() {

     //  dpkCursor.classList.remove("active");

         dpkCursor.className = ""
         dpkCursor.classList.add(dpkCursor); // bad approach 
           
   }

我不想像这样删除这个类，因为它打破我的CSS并导致闪烁只需删除除此之外的所有课程最好的方法是什么

【问题讨论】：

“最好的方法是什么” - 无论你用哪种方式编写它都可以工作且易于维护。
我看不出你的方法有什么问题...
你的做法有什么问题？ dpkCursor.className = 'dpkCursor' 少了一步。你知道增加了哪些类吗？
见：stackoverflow.com/questions/5363289/…
所以只需执行 dpkCursor.className = 'dpkCursor'...... 与您接受的 dpkCursor 之外的内容没有什么不同@ 没有硬编码。如果您知道可以添加哪些类dpkCursor.classList.remove("foo", "bar", "baz");

标签： javascript

【解决方案1】：

如果要删除所有内容，最简单的方法就是将其重新设置为开始

dpkCursor.className = 'dpkCursor';

如果您知道可以添加哪些类，则可以删除它们。如果他们不在那里，那没有任何区别。因此，只需将所有可能存在的类放在 remove 方法中即可。

dpkCursor.classList.remove('foo', 'bar', 'baz');

【讨论】：

@Dpk 只要你认为它永远是第一位的，那就冒险吧。希望将来不会改变顺序。 :)
@epascarello 因为你没有做到 完全按照 OP 的要求进行，即使你的答案更简单。也许他们需要它是动态的，但是应该在问题中指定。
最后，我猜你所做的任何事情都可以 100% 用 CSS 完成，甚至不需要这个。

【解决方案2】：

你也可以使用split函数：

 target.addEventListener("mouseleave", resetCursor);


   function resetCursor() {
         dpkCursor.className = dpkCursor.className.split(' ')[0];
   }

这会将dpkCursor.className 设置为第一类（dpkCursor）

【讨论】：

希望班级是零位......
不知道它比仅仅做dpkCursor.className = 'dpkCursor'lol 更好
是的，这个答案实际上是dpkCursor.className = 'dpkCursor' 唯一的事情是得到dpkCursor 是不是在解析字符串......