Javascript页面颜色更改

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

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

然后，我在每个我想更改但不起作用的元素上设置了一个类

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

你知道我做错了什么吗？如果你不确定我在问什么，我在问我如何改变它从附加到身体。我在preview.html中有它。我可以附加到这个吗

编辑

我只是厌倦了使用.color的id选择器，但它没有起作用。不知道为什么

---

Sam

您错过了jQuery选择器上的“.”

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

蓝色
灰色
红色
绿色
$（“#下拉菜单”）。关于（“更改”，函数（e）{
$（“body”）.css（'颜色'，$（“#下拉选项：选中”）.attr（“值”）；
});

---

更改选择框后，主体元素的颜色属性将更改。请在document.ready wrapper中添加javascript代码

大多数答案的问题是它们忽略了

removeAttr（'class'）

的副作用，即删除所有其他类，包括“color”。我建议只更改已知的类别：

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

JSFiddle:

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

JSFiddle:

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

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

---

JSFiddle:

“我知道在body类中使用它不是一个好主意”为什么不呢？当然，删除所有类（

$（body）.attr（'class'，''）

）可能是个坏主意，但在其中管理类以设置页面颜色是完全合理的。对不起，这很糟糕，因为它会覆盖我的所有其他页面，可以让它停留在预览页面上，使用

$（“颜色”）

您选择所有的

标记，顺便说一句，这些标记没有有效的标记。如果要选择某个类，请使用

$（“.class”）

选择器，就像使用

$（“.colorSelect”）

一样。您可以只使用divs。当您删除元素上的所有类，然后期望使用选择器再次将其作为目标时，这永远不会起作用！问题是你为什么有投票权请解释你的代码是做什么的，为什么它能解决这个问题。仅仅包含代码的答案（即使它有效）通常不会帮助OP理解他们的问题。

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