0

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

4

8 に答える 8

4

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

更新された Fiddle DEMO

于 2013-11-06T13:33:13.977 に答える
0

これを試して。 

 $('.send-btn').click(function(){
    $('.chat-screen').append($(".text-bar").val());
    });
于 2013-11-06T13:35:53.273 に答える
0

(.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

于 2013-11-06T13:39:47.333 に答える
0

実際には、テキストだけでなく、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'));
       });
于 2013-11-06T13:45:30.120 に答える