我有一个聊天应用程序，它将消息附加到屏幕上随机空间的无序列表中（参见示例http://imgur.com/QrRQvV6）。
现在所有消息都显示在橙色背景前。我想让用户通过单击该颜色的一个小框来在 5 种特定背景颜色之间进行选择。
li {
background: #E99D41;
font-family: Helvetica, sans-serif;
color: #FFF;
}
我知道我需要将这些颜色框链接到“li 背景”，但我不确定如何。您是否会使用 Javascript 来执行一旦选择了某个颜色框，“li 背景”就会变为该颜色的功能？如果有怎么办？
感谢任何想法！
【问题讨论】：
标签： javascript jquery html css chat
我会为颜色使用不同的 CSS 类，并根据用户所做的选择更改这些类。 例如：
HTML
<ul>
<li class="black">message</li>
<li class="black">message</li>
<li class="black">message</li>
<li class="black">message</li>
<li class="black">message</li>
</ul>
<input id="red" type="radio" value="red" name="colors" />
<label for="red">red</label>
<input id="blue" type="radio" value="blue" name="colors" />
<label for="blue">blue</label>
<input id="black" type="radio" value="black" name="colors" />
<label for="black">black</label>
CSS
li {
color: white;
}
li.black {
background-color: black;
}
li.red {
background-color: red;
}
li.blue {
background-color: blue;
}
JavaScript
$("input[type=radio]").on("change", function () {
$("li").removeClass("black red blue").addClass($(this).val());
});
【讨论】：
您可以使用 jquery 来做到这一点....首先我们制作五个小的颜色 div 并为其指定颜色名称的类。然后我们使用 Jquery 为 li 的 background-clor 设置动画。 这是代码...-----
HTML---
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>choose color</p>
<div class="red" style="width:20px;height:20px;background-color:red"></div>
<div class="blue"
style="width:20px;margin-top:10px;height:20px;background- color:blue">
</div>
<div class="green"
style="width:20px;margin-top:10px;height:20px;background- color:green"></div>
<div class="yellow"
style="width:20px;margin-top:10px;height:20px;background-color:yellow"></div>
<div class="black"
style="width:20px;height:20px;margin-top:10px;background-color:black"></div>
<ul style="margin-top:20px;background-color:orange">
<li>tea</li>
<li>coffee</li>
<li>star</li>
<li>one</li>
<li>two</li>
</ul>
Javascript----
var main=function(){
$(".red").on("click", function() {
$("ul").css("background", "red");
})
$(".blue").on("click", function() {
$("ul").css("background", "blue");
})
$(".green").on("click", function() {
$("ul").css("background", "green");
})
$(".yellow").on("click", function() {
$("ul").css("background", "yellow");
})
$(".black").on("click", function() {
$("ul").css("background", "black");
})
}
$(document).ready(main)
【讨论】：