我有一个带有颜色选项列表的菜单。其中一种颜色是“蓝色”并且有一类“已选择”,我的背景颜色是“蓝色”。我想根据所选类别的颜色更改背景颜色。我已经知道如何更改类别,但现在我想知道如何使用协调颜色来识别“选中”的类别。
这是我的代码:
jQuery:
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;
}
最佳答案
您可以检查所选元素中的类:
$(".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);
});
关于javascript - jQuery - 如何根据具有类 "selected"的项目更改背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13556691/