可點擊顏色框來更改聊天泡泡顏色

-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

可點擊顏色框來更改聊天泡泡顏色

回答

相關問題