Пользовательский цвет чата

Question

У меня есть приложение чата, которое добавляет сообщения в неупорядоченный список в случайном пространстве на экране (см. Пример http://imgur.com/QrRQvV6).

Прямо сейчас все сообщения появляются перед оранжевым фоном. Я хочу, чтобы пользователь мог выбирать между 5 конкретными цветами фона, нажав на небольшой квадратик этого цвета.

li { 

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

Я знаю, что мне нужно связать эти цветные поля с «ли фон», но я не уверен, как это сделать. Используете ли вы Javascript для выполнения функции после выбора определенного цветового поля, «ли фон» изменяется на этот цвет? Если да, то как?

Любые идеи оцениваются!

Answer 1

Вы можете использовать jquery для этого. Сначала мы делаем fiv небольшие divs цветов и даем ему класс своего имени цвета. Затем мы используем JQuery для анимации фона-clor li. вот код ...-----

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