Question

I have a drop down box I am using to change CSS using jQuery

I have set up a series of CSS classes to use.

Two of my CSS classes also contain a :before class

Using jQuery, if I select one of the items in the box that use the :before option, there is no problem.

When I select the other CSS that uses the :before option, it is ignoring the :before part of the CSS when its displaying it.

If I choose the CSS with the :before, then choose one that doesnt use the :before, then switch to the other one, it is fine, it’s just when I am switching from one CSS with :before to another CSS with :before

the jQuery I am using for changing the CSS looks like this:

  $("#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);

    })

Am I doing something wrong that is causing it not to load the :before after each selection?

Answer 1

The each() logic looks wrong, only a single value, of select.col‘s options, is being used.

Change the code to:

$("#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.
    } );
} );

Other than that, we need to the the relevant CSS and HTML, to help with any additional problems — like that IE-only behavior that you mentioned.