可点击颜色框来更改聊天泡泡颜色

-1

我有一个聊天应用程序，用户可以在其中提交消息并且消息出现在橙色背景的聊天泡泡中。我创建了5个彩色的div框，我想链接到聊天泡泡的背景颜色。我希望用户可以点击其中一个彩色div，并且他们的以下消息将出现在具有该背景的聊天泡泡中。我怎么能这样做？可点击颜色框来更改聊天泡泡颜色

见链接来加以说明：http://imgur.com/D9ZsErP

CODE：

HTML：

</ul> 

<div> 

<input type="text" id="typetextbox" /> 

<button type="submit" id="submit"> </button> 


</div> 

<div><img src="Images/brown-block.png" id="Brown"/></div> 
<div><img src="Images/blue-block.png" id="Blue" /></div> 
<div><img src="Images/red-block.png" id="Red" /></div> 
<div><img src="Images/green-block.png" id="Green"/></div> 
<div><img src="Images/orange-block.png" id="Orange"/></div>

~~JAVA~~ JAVASCRIPT：

$('#typetextbox').keypress(function (e){ 
if(e.keyCode == 13) $('#submit').click(); 
}); 

$('#submit').click(function(){ 
    var message = $('#typetextbox').val(); 
    if (message.replace(/ /g, '')){ 
     var positions = makeNewPosition(); 
     var el = $('<li>'+message+'</li>'); 
     $('#messagebox').append(el);

CSS：

li { 
    height:auto; 
    width:auto; 
    background: #E99D41; 
    position: absolute; 
    background-opacity: 50%; 
    font-family: Helvetica, sans-serif; 
    color: #FFF; 

#Blue{ 
    position: absolute; 
    top: 88%; 
    left: 25%;  
}

＃布朗，＃红色，＃绿色和＃橙色与＃蓝色相同。

我希望这一切都有意义，我相信它是一个非常简单的事情，但我真的很感谢帮助！

感谢

来源

2014-10-10 cja

只需添加您的特定样式属性，使邮件看起来像你想

var currentSelectedColor = undefined; 
 

 
$('.colorPicker>div').on('click',function(e){ 
 
    currentSelectedColor = $(e.currentTarget).attr('class'); 
 
    $('#typetextbox').css('background-color',currentSelectedColor); 
 
}); 
 

 
$('#submit').on('click',function(){ 
 
    var msg = $.trim($('#typetextbox').val()); 
 
    if(msg=='') 
 
    { 
 
    return; 
 
    } 
 
    $('<li/>').append($("<div/>", { 
 
    class: currentSelectedColor? currentSelectedColor: '', 
 
    text: msg 
 
    })).appendTo('#messagebox'); 
 
});

li 
 
{ 
 
    padding-bottom: 3px; 
 
    list-style:none; 
 
    } 
 

 
#messagebox>li>div { 
 
    height:auto; 
 
    width:auto; 
 
    font-family: Helvetica, sans-serif; 
 
    display: inline-block 
 
    } 
 

 
.colorPicker>div 
 
{ 
 
    width: 10px; 
 
    height:10px; 
 
    display: inline-block 
 
    } 
 

 
.red 
 
{ 
 
    background-color: red; 
 
    } 
 

 
.green 
 
{ 
 
    background-color: green; 
 
    } 
 
.blue 
 
{ 
 
    background-color: blue; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id='messagebox'> 
 

 
</ul> 
 
    
 
    <div class='colorPicker'> 
 
    <div class='red'></div> 
 
    <div class='green'></div> 
 
    <div class='blue'></div> 
 
    </div> 
 
<input type="text" id="typetextbox" /> 
 

 
<button type="button" id="submit">Submit </button>

来源

2014-10-10 13:54:41 aleha

看看到this fiddle

的想法是让点击div的颜色和textarea的值，并显示添加了css：。的文字选择颜色，使用Jquery。

1.Get点击的div的颜色：

var color = $(this).css("background-color");

//这是指用于点击的html元素在这个例子中它是所选择的彩色的div

2.注册的值键入的文本：

var thought = jQuery("textarea#message").val();

3.显示结果：通过ID得到的结果HTML元素中，添加输入的文本作为该元素的HTML，CSS添加：研究背景色= submited颜色。

$("#result").html("<span style='backgroud-color:" +color + ";'>" + thought + "</span>");

4.put这在点击功能

来源

2014-10-10 14:12:23

可点击颜色框来更改聊天泡泡颜色

回答

相关问题