javascript - 自定义聊天框颜色

Question

我有一个聊天应用程序，它将消息附加到屏幕上随机空间的无序列表中(参见示例 http://imgur.com/QrRQvV6)。

现在所有消息都显示在橙色背景前。我想让用户通过单击该颜色的小框来在 5 种特定背景颜色之间进行选择。

li {

 background: #E99D41;
 font-family:  Helvetica, sans-serif;
 color: #FFF;
   } 

我知道我需要将这些颜色框链接到“li 背景”，但我不确定如何操作。您是否会使用 Javascript 来执行选择某个颜色框后，“li 背景”变为该颜色的功能？如果是怎么办？

欢迎任何想法!

Answer 1

我会为颜色使用不同的 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());
});

FIDDLE