Question

我有一堆代码可以使用下拉菜单更改文本的颜色

$(function() {
  $(".colorSelect").change(function() {
    $("body").attr('class', '');
    $(".colorSelect").each(function() {
      $("body").addClass($(this).val());
    });
  });
});

我知道在体型课上使用它并不是一个好主意，所以我试过这个但它没有用。

    $(function() {
  $(".colorSelect").change(function() {
    $("color").attr('class', '');
    $(".colorSelect").each(function() {
      $("color").addClass($(this).val());
    });
  });
});

然后，我在每个我想要改变的元素上放了一个课程。

任何想法我可能做错了什么？如果你不确定我在问什么，我会问我如何将它改为附加到身体上。我在预览版中有它可以添加到这个吗？

修改

我只是厌倦了使用.color的id选择器而且还没有用。不知道为什么！

萨姆

Answer 1

大多数答案的问题是他们错过了removeAttr('class')的副作用，即删除所有其他类，包括＆＃34; color＆＃34;。我建议只改变已知的类：

$(function () {
    $(".colorSelect").change(function () {
        $(".color").removeClass("red, blue").addClass($(this).val());
    });
});

JSFiddle： https://jsfiddle.net/TrueBlueAussie/qwrcxzat/2/

稍微改进的版本会触发初始选择（以避免必须在每个元素上设置初始类）：

$(function () {
    $(".colorSelect").change(function () {
        $(".color").removeClass("red, blue").addClass($(this).val());
    }).trigger('change');
});

JSFiddle： https://jsfiddle.net/TrueBlueAussie/qwrcxzat/4/

更新

如果你不想硬连接要删除的类列表，你也可以只迭代列表：

$(function () {
    $(".colorSelect").change(function () {
        $('option', this).each(function(){
            $(".color").removeClass($(this).val());
        });
        $(".color").addClass($(this).val());
    }).trigger('change');
});

JSFiddle： https://jsfiddle.net/TrueBlueAussie/qwrcxzat/6/

Answer 2

你错过了'。'在jQuery选择器上。

$(function() {
  $(".colorSelect").change(function() {
    $(".color").attr('class', ''); // See selector on this line
    $(".colorSelect").each(function() {
      $(".color").addClass($(this).val());
    });
  });
});

Answer 3

 <select id='dropdown'>
  <option value="blue">blue</option>
  <option value="grey">grey</option>
  <option value="red">red</option>
  <option value="green">green</option>
</select>




$("#dropdown").on("change",function(e){  
         $("body").css('color',$("#dropdown option:selected").attr("value"));
    });

在选择框的更改中，body元素的color属性将发生变化。请在document.ready wrapper

中添加javascript代码

Javascript页面颜色变化

3 个答案:

更新