jQuery et: avant tag CSS

Question

J'ai une liste déroulante j'utilise pour changer CSS en utilisant jQuery

J'ai mis en place une série de classes CSS à utiliser.

Deux de mes classes CSS contiennent aussi: avant la classe

En utilisant jQuery, si je sélectionne l'un des éléments dans la boîte qui utilisent le: avant l'option, il n'y a pas de problème.

Lorsque je sélectionne l'autre CSS qui utilise l'option: before, il ignore la partie: before du CSS lorsqu'il l'affiche. Si je choisis le CSS avec le: avant, alors choisissez celui qui n'utilise pas le: avant, puis passez à l'autre, c'est bien, c'est juste quand je passe d'un CSS avec: avant à un autre CSS avec: avant

jQuery J'utilise pour changer le CSS ressemble à ceci:

$("#colour").change(function() { 
     var str = ""; 
     $("select.col option:selected").each(function() { 
      str = $(this).val(); 
      }); 

      var currClass = $('#heading').attr('class'); 

      $('#heading').addClass(str); 
      $('#heading').removeClass(currClass); 

    }) 

ai-je fait quelque chose de mal qui est à l'origine de ne pas charger le: avant après chaque sélection?

Answer 1

La logique each() semble erroné, une seule valeur, des options de select.col, est utilisé.

Modifier le code:

$("#colour").change (function() { 
    $('#heading').removeClass(); //-- Clears all classes 

    $("select.col option:selected").each (function() { 
     var str = $(this).val(); 
     $('#heading').addClass (str); // Add desired classes back, one at a time. 
    }); 
}); 

Autre que cela, nous devons le CSS et HTML pertinents, pour aider à tout autre problème - comme ce comportement IE seulement que vous avez mentionné.

Answer 2

Remplacer

var currClass = $('#heading').attr('class'); 

      $('#heading').addClass(str); 
      $('#heading').removeClass(currClass); 

Par

$('#heading').removeClass().addClass(str);