javascript - JS/Jquery - 如何结合添加/删除类来删除数据属性？

Question

我试图从 div 中删除一个类，同时添加一个类。如果我没有将任何数据属性附加到同一个 div，它就可以正常工作(我怀疑它通常与数据属性有关，但猜测它与我拥有的数据属性有关，因为它们用于产生效果)。

由于删除/添加类不能与数据属性一起使用，因此我想到先删除数据属性，然后删除/添加类。 d. 去除属性。有效，但我仍然无法删除/添加类(class)。(为了澄清为什么我不只是从 html 中删除 data.attr.:我想添加/删除触摸设备的类，其中我不需要 data.attr.，但需要为其他设备保留它们。)

我真的找不到任何解决方案..有什么想法吗？谢谢!

HTML:

<div id="welcomeFrame" class='frame2 frame' data-0='transform: scale(1.0,1.0);' data-150p='transform: scale(1.3, 1.3);opacity: 1;' data-200p='opacity: 0; transform: scale(6, 6);'>
</div>

JS:

var el = document.getElementById("welcomeFrame")
el.removeAttribute("data-0");
el.removeAttribute("data-150p");
el.removeAttribute("data-200p");
$("#welcomeFrame").removeClass("frame2").addClass("newFrame");

Answer 1

data- 属性不会与类的添加和删除发生冲突。

然而，你的代码在 JQuery 语法和普通 JavaScript 之间来回跳转，我只会选择一个并坚持使用它。对于这样简单的事情，我个人认为不需要 JQuery。

var el = document.getElementById("welcomeFrame");

el.removeAttribute("data-0");
el.removeAttribute("data-150p");
el.removeAttribute("data-200p");
el.classList.remove("frame2");
el.classList.add("newFrame");

// This shows that everything got removed/added as it should have:
console.log(el);

frame2 { background-color:green; border:1px solid red; } /* This is the default */
.newFrame { background-color:yellow; }                   /* And, this is applied later by code */

<div id="welcomeFrame" class='frame2 frame' 
     data-0='transform: scale(1.0,1.0);' 
     data-150p='transform: scale(1.3, 1.3);opacity: 1;' 
     data-200p='opacity: 0; transform: scale(6, 6);'>
     TEST
</div>