javascript - append() 文本值到 div onclick()

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

score 4 · Accepted Answer

你需要.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('');
    });
});

更新了小提琴演示

score 1 · Accepted Answer

1

这是你的小提琴更新：jsfiddle

val()改为使用text()

于 2013-11-06T13:40:12.333 回答

score 0 · Accepted Answer

尝试这个。

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

score 0 · Accepted Answer

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

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

还要确保，如果脚本位于<head>HTML 页面中，或者位于元素的实际 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('');
    });
});

更新了 jsFiddle

score 0 · Accepted Answer

$('.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/

score 0 · Accepted Answer

几个问题：

value在输入和class属性之间添加空格
更改.text()为.val()- 输入没有文本节点，只有值
利用$('.chat-screen').append($(".text-bar").val());
确保包含 jQuery

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

score 0 · Accepted Answer

实际上，您确实应该附加一个 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'));
       });

score 0 · Accepted Answer

同时追加文本和下拉值

<!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>

javascript - append() 文本值到 div onclick()

8 回答 8

Related

Reference