jQuery - 如何更改背景颜色根据具有类“选择”的项目

我有这个菜单的颜色选项列表。其中一种颜色是“蓝色”，并有一类“选定”，我的背景颜色是“蓝色”。我想根据哪种颜色选择的类别来更改背景颜色。我已经知道如何改变班级，但现在我想知道如何使用协调颜色来标识“选定”班级。jQuery - 如何更改背景颜色根据具有类“选择”的项目

这里是我的代码：

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; 
}

来源

2012-11-25 ModernDesigner

如果您替换$（“body”）。css（“background”，coorColor）; （“body”）.css（“background-color”，$（this）.text（））; –

呃，我看到你在那里做什么，但是（我有一个表白）链接项目并没有实际说出颜色，它具有它的颜色的背景颜色属性。所以它会更像'ul li.blue {background：blue; display：block; height：10px; width：10px}' – ModernDesigner

这是什么：$（“body”）.css（“background-color”，$ （本）的CSS（ '背景颜色'））; –

您可以检查所选元素的类：

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

来源

2012-11-25 23:31:47 Guffa

噢，非常感谢！ :-) – ModernDesigner

一个稍微简单的方法是使用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');

来源

2012-11-25 23:35:32 Blender

如果你打算只有这些物品的类别，你可以这样做

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

来源

2012-11-25 23:47:37 AlexandruSerban

jQuery - 如何更改背景颜色根据具有类“选择”的项目

回答

相关问题