jQuery: Générique sélecteur de classe dans removeClass

Ce bout de code fonctionne pour supprimer une classe existante, avant d'en ajouter un nouveau, quand je le spécifier directement (c'est à dire, 'ratingBlock', 'ratingBlock1', 'ratingBlock2', etc.). Mais lorsque j'utilise un sélecteur générique dans le removeClass ('[class^="ratingBlock"]'), il ne fonctionne pas. Suis-je en train de faire quelque chose de mal? Merci.

<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 accepte également d'une fonction.

OriginalL'auteur mheppler9d | 2013-04-16

  1. 5

    $.removeClass() ne pas prendre un sélecteur en tant que paramètre, seul un nom de classe (ou classe des noms).

    Voir: Retrait de plusieurs classes (jQuery)

    De sorte que vous basiacally besoin d'appeler:

    $.removeClass('ratingBlock1 ratingBlock2 ratingBlock3 ratingBlock4 ratingBlock5');
    C'est ce que j'ai fini par aller avec, parce que cela a fonctionné. J'ai été en supposant que je n'ai pas la liste de toutes les classes, mais depuis il n'a que cinq classes, et j'ai un court délai, c'est ce que j'ai roulé avec. Je vous remercie.

    OriginalL'auteur MythThrazz

  2. 2

    removeClass prend soit une fonction ou un nom de classe. Vous essayez de fournir un sélecteur css. On dirait que tous vous avez besoin est:

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

    En outre, vous pouvez supprimer un caractère générique comme ceci:

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

    Référence: JQuery removeClass générique

    Lorsque j'ajoute le deuxième, générique solution à mon exemple de fragment de code, il n'est pas de supprimer la classe 'ratingBlock" de la div.test.bloc, il continue tout simplement à ajouter la nouvelle classe, 'ratingBlock1', 'ratingBlock2", etc.
    est-il un extra "\" devant les regex /\ratingBlock...?
    Comme dirait ma regex est un peu foiré (fix) bien que l'ensemble de la stratégie fonctionne.

    OriginalL'auteur lucuma

  3. 1

    Si cela rend tout plus facile, je a écrit un plugin pour une autre réponse qui va priver les classes de début (ou de fin) avec un match, donc

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

    va supprimer ratingBlock-1 et ratingBlock-2 mais pas ratingBlock (aussi longtemps que vous incluez le tableau de bord).

    Code: https://gist.github.com/zaus/6734731

    OriginalL'auteur drzaus

  4. -1

    Je pense que votre problème est que les guillemets: je ne pense pas que vous en avez besoin, essayez de les omettre.

    '[class^=ratingBlock]'

    EDIT:

    .removeClass() accepte un nom de classe, pas d'un sélecteur.

    Cependant, vous pouvez spécifier plusieurs valeurs séparées par des espaces des noms de classe, essayez ceci:

    .removeClass('ratingBlock ratingBlock1 ratingBlock2');

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

    OriginalL'auteur Bill