可单击颜色框更改聊天气泡的颜色

Clickable colour boxes to change chat bubble colour

本文关键字：颜色 聊天 气泡 单击      更新时间：2023-09-26

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

请参阅链接以获取图示：https://i.stack.imgur.com/LnRfE.jpg

代码：

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>

JAVAJAVASCRIPT: 
$('#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%;      
}

#棕色、红色、绿色和橙色都与蓝色相同。

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

感谢

只需添加特定的样式属性，即可使消息看起来像您想要的

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>

看看这个小提琴

其想法是使用Jquery获得单击的div的颜色和文本区域的值，并显示键入的文本，添加css：所选颜色。

1.获取点击的div的颜色：

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

//这是指本例中单击的html元素，它是所选的彩色div

2.获取键入文本的值：

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

3.显示结果：通过id获取结果HTML元素，添加键入的文本作为该元素的HTML，添加css：background color=submited color。

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

4.将其放入点击函数

相关文章：