jQuery 和 :before CSS tag

Question

我有一个下拉框，我用它来使用 jQuery 更改 CSS

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

我的两个 CSS 类也包含一个 :before 类

使用 jQuery，如果我选择框中使用 :before 选项的元素之一，则没有问题。

当我选择其他使用 :before 选项的 CSS 时，它会在显示时忽略 CSS 的 :before 部分。

如果我选择带有 :before 的 CSS，然后选择一个不使用 :before 的 CSS，然后切换到另一个，没关系，只是当我从一个带有 :before 的 CSS 切换到另一个带有 :before 的 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);

    })

我是不是做错了什么导致它在每次选择后不加载 :before？

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 的行为。