Question

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

现在所有消息都出现在橙色背景前面。我想让用户通过点击该颜色的小方框来选择5种特定的背景颜色。

li {

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

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

感谢任何想法！

Answer 1

你可以使用jquery这样做....首先我们使用fiv小颜色div并给它们颜色名称的类。然后我们使用Jquery动画li的背景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)

http://jsfiddle.net/vashuStarPro/av52m29m/ ---演示

Answer 2

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

自定义聊天框颜色

2 个答案: