jQuery - 如何根据具有类"selected"的项目更改背景颜色

Question

我有这个菜单，里面有颜色选项列表。其中一种颜色是"蓝色"，并且具有"选定"类，而我的背景颜色是"蓝色"。我想根据所选颜色的颜色来更改背景颜色。我已经知道如何更改类，但现在我想知道如何用协调颜色识别"选定"类。

这是我的代码：

j查询：

var coorColor;
$(".item").click(function() {
    $(".item").removeClass("selected");
    $(this).addClass("selected");
    $("body").css("background", coorColor);
});
// THIS IS THE PART I NEED HELP WITH
if($(".item.red.selected")) {
    coorColor = "red";
}
if($(".item.green.selected")) {
    coorColor = "green";
}
etc...

.HTML：

<ul>
    <li class="item blue selected">Blue</li>
    <li class="item red">Red</li>
    <li class="item green">Green</li>
</ul>

.CSS：

/* because the item "blue" is selected by default the body's bg-color is blue by default but will change according to jQuery */
body {
    background: blue;
}
.selected {
    text-shadow: 1px 1px 10px #565756;
}

Answer 1

您可以在所选元素中检查类：

$(".item").click(function() {
  $(".item").removeClass("selected");
  $(this).addClass("selected");
  if ($(this).hasclass("blue")) {
    coorColor = "blue";
  } else if ($(this).hasclass("red") {
    coorColor = "red";
  }
  $("body").css("background", coorColor);
});

Answer 2

一种稍微简单的方法是使用data-属性：

<ul>
    <li data-color="blue"  class="item blue selected">Blue</li>
    <li data-color="red"   class="item red">Red</li>
    <li data-color="green" class="item green">Green</li>
</ul>

然后，您的代码将变为：

var coorColor = $('.item.selected').data('color');

Answer 3

如果你只打算为该项目提供这些类，你可以这样做

$(".item").click(function() {
    $(".item").removeClass("selected");
    /* this will eliminate the unwanted classes leaving just the color class */
    var coorColor = $(this).attr('class').replace(new RegExp('item|anotherClass| ', 'g'), '');
    $(this).addClass("selected");
    $("body").css("background", coorColor);
});