Question

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

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%;      
}

＃Brown，＃Red，＃Green和#Orange都和#Blue一样。

我希望这一切都有道理，我确信这是一件非常简单的事情，但我非常感谢你的帮助！

谢谢

Answer 1

只需添加您的特定样式属性即可根据需要显示消息

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>

Answer 2

看看this fiddle

这个想法是获取被点击的div的颜色和textarea的值，并使用Jquery显示添加css：所选颜色的键入文本。

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

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

//这个引用了这个例子中点击的html元素，它是选择的彩色div

2.确定键入文本的值：

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

3.显示结果：按id获取结果HTML元素，将键入的文本添加为此元素的HTML，添加css：backgroud-color = submited color。

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

4.在点击功能中输出

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

2 个答案: