jQuery: Селектор класса подстановочных знаков в removeClass

Этот фрагмент кода предназначен для удаления существующего класса перед добавлением нового, когда я указываю его напрямую (например, «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>

jquery wildcard selector removeclass
person mheppler9d    schedule 16.04.2013    source источник
comment
.removeClass также принимает функцию.   -  person lucuma    schedule 16.04.2013

Ответы (4)


arrow_upward
5
arrow_downward

$.removeClass() не принимает в качестве параметра селектор, только имя класса (или имена классов).

См .: Удаление нескольких классов (jQuery)

Итак, вам в основном необходимо позвонить:

$.removeClass('ratingBlock1 ratingBlock2 ratingBlock3 ratingBlock4 ratingBlock5');
person MythThrazz    schedule 16.04.2013
comment
Это то, к чему я пришел, потому что это сработало. Я предполагал, что мне не нужно перечислять все классы, но поскольку это было всего пять классов, и у меня короткий дедлайн, это то, с чем я справился. Спасибо. - person mheppler9d; 16.04.2013

arrow_upward
2
arrow_downward

removeClass принимает либо функцию, либо имя класса. Вы пытаетесь предоставить селектор css. Похоже, что все, что вам нужно, это:

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

Кроме того, вы можете удалить такой подстановочный знак:

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

Ссылка: JQuery removeClass подстановочный знак

person lucuma    schedule 16.04.2013
comment
Когда я добавляю второе решение с подстановочными знаками в свой пример фрагмента кода, он не удаляет существующий класс «ratingBlock» из div.test.block, он продолжает просто добавлять новый класс «ratingBlock1», «ratingBlock2» и т. Д. . - person mheppler9d; 16.04.2013
comment
есть ли лишний \ перед регулярным выражением /\ratingBlock...? - person drzaus; 27.09.2013
comment
Похоже, мое регулярное выражение немного запуталось (исправлю), хотя общая стратегия работает. - person lucuma; 28.09.2013

arrow_upward
1
arrow_downward

Если это упростит задачу, я написал плагин для другого ответа, который разделит классы, начинающиеся (или заканчивающиеся) совпадением , так

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

удалит ratingBlock-1 и ratingBlock-2, но не ratingBlock (если вы включите тире).

Код: https://gist.github.com/zaus/6734731.

person drzaus    schedule 27.09.2013

arrow_upward
-1
arrow_downward

Я думаю, ваша проблема в кавычках: я не думаю, что они вам нужны, попробуйте их опустить.

'[class^=ratingBlock]'

РЕДАКТИРОВАТЬ:

.removeClass() принимает имя класса, а не селектор.

Однако вы можете указать несколько имен классов, разделенных пробелами, поэтому можете попробовать следующее:

.removeClass('ratingBlock ratingBlock1 ratingBlock2');

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

person Bill    schedule 16.04.2013