Question

我有一个用于使用jQuery更改CSS的下拉框

我已经设置了一系列要使用的CSS类。

我的两个CSS类还包含：before class

使用jQuery，如果我选择使用：before选项的框中的一个项目，则没有问题。

当我选择使用：before选项的其他CSS时，它忽略了：在显示它之前的CSS部分。

如果我选择带有：之前的CSS，那么选择一个不使用：之前的那个，然后切换到另一个，这很好，就在我从一个CSS切换到：之前到另一个CSS时：前

我用来更改CSS的jQuery看起来像这样：

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

    })

我做错了什么导致它在每次选择之后都没有加载：

Answer 1

each()逻辑看起来有误，只使用select.col个选项的单个值。

将代码更改为：

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

除此之外，我们需要相关的CSS和HTML，以帮助解决任何其他问题 - 比如您提到的仅限IE的行为。

Answer 2

替换

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

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

通过

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

jQuery和：在CSS标签之前

2 个答案: