3

当我直接指定它时(即'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>
4

4 回答 4

5

$.removeClass()不将选择器作为参数,只有类名(或类名)。

请参阅:删除多个类 (jQuery)

所以你基本上需要打电话:

$.removeClass('ratingBlock1 ratingBlock2 ratingBlock3 ratingBlock4 ratingBlock5');
于 2013-04-16T14:34:30.117 回答
2

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

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

此外,您可以像这样删除通配符:

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

参考:JQuery removeClass 通配符

于 2013-04-16T14:31:12.707 回答
1

如果它更容易,我为另一个答案编写了一个插件,它将以匹配开始(或结束)剥离类,所以

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

将删除ratingBlock-1ratingBlock-2但不会ratingBlock(只要您包含破折号)。

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

于 2013-09-27T20:38:41.817 回答
-1

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

'[class^=ratingBlock]'

编辑:

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

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

.removeClass('ratingBlock ratingBlock1 ratingBlock2'); 

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

于 2013-04-16T14:27:55.500 回答