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

Posted 2023-03-06

【中文标题】jQuery：removeClass 中的通配符类选择器

【英文标题】：jQuery: Wildcard class selector in removeClass

【发布时间】：2013-04-09 00:21:59

【问题描述】：

当我直接指定它时（即，'ratingBlock'、'ratingBlock1'、'ratingBlock2' 等），此代码 sn-p 用于在添加新类之前删除现有类。但是当我在 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>

【问题讨论】：

.removeClass 也接受一个函数。

【参考方案1】：

$.removeClass() 不接受选择器作为参数，只接受一个类名（或多个类名）。

见：Removing multiple classes (jQuery)

所以你基本上需要调用：

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

【讨论】：

这是我最终选择的，因为它有效。我假设我不必列出所有课程，但由于它只有五个课程，而且我的截止日期很短，这就是我推出的。谢谢。

【参考方案2】：

removeClass 采用函数或类名。您正在尝试提供一个 CSS 选择器。看起来您只需要：

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

此外，您可以像这样删除通配符：

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

参考：JQuery removeClass wildcard

【讨论】：

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

正则表达式/\ratingBlock...前面有多余的“\”吗？

看起来我的正则表达式有点混乱（将修复），尽管整体策略有效。

【参考方案3】：

如果它变得更容易，我wrote a plugin for another answer 将删除以匹配开始（或结束）的类，所以

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

将删除 ratingBlock-1 和 ratingBlock-2，但不会删除 ratingBlock（只要包含破折号）。

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

【参考方案4】：

我认为您的问题是引号：我认为您不需要它们，请尝试省略它们。

'[class^=ratingBlock]'

编辑：

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

但是，您可以指定多个空格分隔的类名，因此可以试试这个：

.removeClass('ratingBlock ratingBlock1 ratingBlock2'); 

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