jQuery：removeClass中的通配符类选择器

Question

这段代码片段可以在我直接指定它（例如，“ratingBlock”，“ratingBlock1”，“ratingBlock2”等）时，起到删除现有类别的作用，然后添加新类别。但是当我在removeClass中使用通配符选择器（'[class^="ratingBlock"]'）时，它不起作用。我做错了什么吗？谢谢。

<style type="text/css">
.ratingBlock {background:gold !important;}
.ratingBlock1, .ratingBlock2, .ratingBlock3, .ratingBlock4, .ratingBlock5 {background:LightGreen;}
</style>

<div class="test block ratingBlock">
Broken
<div><a href="#" class="ratingLink ratingNo-1">1+</a></div>
<div><a href="#" class="ratingLink ratingNo-2">2+</a></div>
<div><a href="#" class="ratingLink ratingNo-3">3+</a></div>
</div>

<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function(){
    initRatingWorks();
});

function initRatingWorks() {
    jQuery("a.ratingLink").bind('click', function() {
      var star = jQuery(this);
      var ratingBlock = star.parents('div.test.block');
      var rating = star.attr('class').match(/\d+/);

      if (ratingBlock.attr('class').indexOf('ratingBlock') !== -1) {
          ratingBlock.removeClass('[class^="ratingBlock"]').addClass('ratingBlock' + rating);
      }
      else {
          ratingBlock.addClass('ratingBlock' + rating);
      }

      return false;
    });
}
// ]]>
</script>

- mheppler9d

---

.removeClass 也可以接受一个函数。 - lucuma

Answer 1

$.removeClass()方法不能将选择器作为参数传递，只能传递类名（或多个类名）。

参考链接: 移除多个类名（jQuery）

因此，您需要调用以下代码：

$.removeClass('ratingBlock1 ratingBlock2 ratingBlock3 ratingBlock4 ratingBlock5');

- MythThrazz

---

这就是我最终采用的方案，因为它有效。我原先以为不需要列出所有类，但由于只有五个类，并且我有一个紧迫的截止日期，所以这就是我选择的方案。谢谢。 - mheppler9d

Answer 2

removeClass接受函数或类名作为参数。你正在尝试提供一个CSS选择器。看起来你只需要使用：

ratingBlock.removeClass('ratingBlock').addClass('ratingBlock' + rating)

此外，您可以通过以下方式删除通配符：

ratingBlock.removeClass (function (index, css) {
    return (css.match (/ratingBlock/g) || []).join(' ');
});

参考资料：JQuery removeClass通配符

- lucuma

---

当我将第二个通配符解决方案添加到我的代码片段示例中时，它不会从div.test.block中删除现有的类'ratingBlock'，它继续只添加新类'ratingBlock1'、'ratingBlock2'等。 - mheppler9d

在正则表达式/\ratingBlock...前面是否多了一个\？ - drzaus

看起来我的正则表达式有点混乱（会修复），尽管整体策略是可行的。 - lucuma

Answer 3

如果有需要，我为另一个答案编写了一个插件，可以删除以某个匹配开头（或结尾）的类，因此

ratingBlock.stripClass('ratingBlock-').addClass('ratingBlock-' + rating);

该操作会移除ratingBlock-1和ratingBlock-2，但不会移除ratingBlock（只要包含破折号）。

代码: https://gist.github.com/zaus/6734731

- drzaus

Answer 4

我认为你的问题在于引号：我认为你不需要它们，尝试省略它们。

'[class^=ratingBlock]'

编辑：

.removeClass() 接受一个类名，而不是一个选择器。

然而，你可以指定多个用空格分隔的类名，所以可以尝试这样做：

.removeClass('ratingBlock ratingBlock1 ratingBlock2'); 

http://api.jquery.com/removeClass/

- Bill