7

好的，我有一个有趣的（嗯，对我来说很有趣，无论如何:)）。

我有一种情况，我有一个具有静态类值的 div，但它也可以分配一个动态的“辅助类”。当用户进行选择时，需要删除任何现有的二级类并添加新类。

忽略使用 id 值（项目标准使用类......无法更改），是否有一种优雅的方法可以在添加新类之前简单地忽略第一个类并删除那里的任何其他类？

示例起始 HTML：

<div class="staticClass dynaClass1" />

示例 JS：

function updateClass(newSecondaryClass) {
    $(".staticClass") . . . **** remove any class besides "staticClass" ****
    $(".staticClass").addClass(newSecondaryClass);
}

如果使用 调用该函数updateClass("dynaClass2");，则生成的 HTML 应为：

<div class="staticClass dynaClass2" />

我可以想到这样做的方法，包括removeClass();在添加新类或 using 时删除所有类 using 并重新添加“staticClass” attr("class", "staticClass " + newSecondaryClass);，但我想知道是否没有办法处理它而不必触摸静态类呢？

最后，我想这是一个学术问题，比什么都重要。. . 似乎这应该是可行的，但我不知道该怎么做。:D

4

5 回答 5

11

您可以删除所有课程并添加您要离开的课程：

$(".staticClass").removeClass().addClass('staticClass');

不带参数调用removeClass()会删除所有类。

如果您不想这样做，那么您可以简单地修改类属性：

$(".staticClass").attr('class', 'staticClass');
于 2013-01-14T16:17:14.783 回答
5

您可以传递一个函数来删除类，它会返回除静态类之外的所有类：

$('.staticClass').removeClass(function(index, klass) { 
  return klass.replace(/(^|\s)+staticClass\s+/, ''); 
})

这将返回对象上的所有类，没有静态类，因此删除除了静态类之外的所有类。

于 2013-01-14T16:22:39.310 回答
4

将函数传递给.removeClass()

本页上 Beat Richartz 答案的修订版。

注意：我试图将此作为编辑发布，但被拒绝了。这个概念是相同的，只是改进了 RegEx。

改进的 RegEx 提供与多个类的词边界匹配

// Remove all classes except those specified
$('span').removeClass(function () { 
    return $(this).attr('class').replace(/\b(?:hello|world)\b\s*/g, ''); 
});

前：

<span class="hello foo">hello</span> <span class="world bar">world</span>`

后：

<span class="hello">hello</span> <span class="world">world</span>`

试试看：http: //jsfiddle.net/gfullam/52eeK/3/

试试它作为一个 jQuery 插件：http: //jsfiddle.net/gfullam/52eeK/5/

FWIW：当您不想将现有类替换为 中的其他类时，此方法是必需的.attr('class', '<final list of classes>')，而只是想删除那些与类列表不匹配的类。

于 2014-06-27T19:50:43.550 回答
2

您可以使用该.attr()功能设置它所需的类。所以：

$('.staticClass').attr('class','<any classes required');

这将替换原来存在的所有类，并添加新的类。

于 2013-01-14T16:20:01.410 回答
0

你所有的类都是通过调用 Javascript DOM 来操作的element.className，所以基本上 jQueryaddClass只是替换了那个字符串。您可以在Github 源代码中看到这一点。

这一切都意味着，如果你打电话

$('.staticClass').addClass('someClass');

无论如何都会被element.className替换，但包含新类。（这意味着你staticClass真的被感动了:)

你打电话时

$('.staticClass').removeClass().addClass('staticClass');

您将替换该字符串两次，这样做没有问题。

于 2013-01-14T16:28:17.523 回答