Question

我正在使用jquery创建一个即时消息程序，并且在单击“发送”按钮后将消息输入消息字段时遇到问题

我有html

<body>
    <div class="main-window">
    <div class="chat-screen"></div>
        <div class="bottom-wrapper">
            <input class="text-bar"></input>
            <input type="button" value="Send"class="send-btn">Send</input>
        </div>
    </div>                
<body>

我尝试使用此jquery

附加它

$('.send-btn').click(function() {
    $(".text-bar").text().appendTo(".chat-screen");
});

但它似乎不起作用。有人可以指出我正确的方向吗？

JSFiddle

Answer 1

您需要.val()

更改

$(".text-bar").text()

到

$(".text-bar").val()

<小时/> 你的代码变成了 Fiddle DEMO

使用.append()

$('.send-btn').click(function () {
    $(".chat-screen").append($(".text-bar").val());
});

<小时/> 在新行中清除文本框和新聊天。

$(document).ready(function () {
    var chat_screen = $(".chat-screen");
    var text_bar = $(".text-bar")
    $('.send-btn').click(function () {
        chat_screen.append(text_bar.val() + '<br/>');
        text_bar.val('');
    });
});

Updated Fiddle DEMO

Answer 2

这是你提醒更新：jsfiddle

使用val()代替text()

Answer 3

试试这个。

 $('.send-btn').click(function(){
    $('.chat-screen').append($(".text-bar").val());
    });

Answer 4

.text()（和正确的.val()）函数返回字符串，而不是jQuery对象，因此没有可用的appendTo()函数。你需要这样做：

$('.chat-screen').append($('.text-bar').val());

还要确保，如果脚本位于HTML页面的<head>中，或者位于元素的实际HTML之前，则将其包装在DOM就绪处理程序中：

$(document).ready(function() {
    $('.send-btn').click(function(){
        $('.chat-screen').append($('.text-bar').val());
    });
});

当然，检查jQuery是否正确加载（它根本不在你的jsFiddle中）。

由于这可能会（很可能）运行很多次，所以你想要为聊天屏幕和文本输入缓存选择器，如下所示：

$(document).ready(function() {
    var $chatscreen = $('.chat-screen'),
        $textbar = $('.text-bar');
    $('.send-btn').click(function(){
        $chatscreen.append($textbar.val());
        $textbar.val('');
    });
});

Updated jsFiddle

Answer 5

$('.send-btn').click(function(){
//$(".text-bar").val().appendTo(".chat-screen");
$(".chat-screen").append($(".text-bar").val())
$(".chat-screen").append('<br />')
});

请参阅http://jsfiddle.net/K95P3/15/

Answer 6

几个问题：

在输入

value

class

将.text()更改为.val() - 输入没有文本节点，只有值
使用$('.chat-screen').append($(".text-bar").val());
确保包含jQuery

请参阅更新的小提琴http://jsfiddle.net/K95P3/11/

Answer 7

实际上，你真的应该附加一个html标签，而不仅仅是文本。我的意思是，你可以，但不应该。

我建议的是：

为以下消息创建基本容器：

       <div class="message-container" style="display:none;"> 
          <span class="message"> </span>
       </div>

然后克隆此容器，将其填入聊天中的输入值并将其附加到聊天屏幕。代码可能是这样的：

      $('.send-btn').click(function(){
               var container = $('.message-container:hidden').clone(true).show();
               container.find('.message').text($(".text-bar").val());
               container.appendTo($('.chat-screen'));
       });

Answer 8

在同一时间附加文字和下拉值

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').click(function(){
//var x=$("#cars option:selected").text();
//var y=$("#bus").val();
//alert(''+x+'     '+y+'');
$(".chat-screen2").append($("#cars").val()+'<br/>');
 $(".chat-screen").append($("#bus").val()+'<br/>');
 $("#bus").val('');
 });
 });
</script>
</head>
<body>


  <select name="cars" id="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <input id="bus" type="text">
  <button type="submit">submit</button>
  <br><br>
  <div class="chat-screen2" style="float:left;"></div>
  <div class="chat-screen" style="float:left;margin-left:10px;"></div>
</body>
</html>

将文本值附加到div onclick（）

8 个答案: