-1

毎回ページを更新せずに、ユーザーエントリに基づいて Web ページに動的リストを作成する方法について、誰かが私を正しい方向に向けることができるかどうか疑問に思っています。

たとえば、ユーザーは次のことを行います。

  1. テキストボックスに単語を入力する

  2. ボタンをクリック

  3. 単語はページの別の場所に表示されます

  4. 単語はテキストボックスから消去されます

入力された新しい単語は、以前に入力された単語の下に自動的に書き込まれます。

4

2 に答える 2

3 
<div id="target"><div>

<input type="text" id="newInput" />
<input type="button" id="saveInput" />

<script>
// when button is pressed:
$('#saveInput').on('click', function(){
    // check if something is there
    if( $('#newInput').val().length !==0){
        $('#target').append('<div>'+ $('#newInput').val()+'</div>'); //append to a target
        $('#newInput').val(''); // empty input
        $('#newInput').focus() // for bonuspoint, place cursor back in input
    }
});
</script>

新しい各エントリを最初のリスト項目として使用する場合は、prepend()代わりに使用しますappend()

于 2013-08-28T19:27:42.937 に答える
1

これが実際の例です：

HTML:

<input type="text" id="txtWord"/>
<input type="button" id="btnAddWord" value="Add new word" />

<ul id="words">
</ul>

脚本：

$(document).ready(function(){
    $('#btnAddWord').bind('click', function(){
        if( $('#txtWord').val() !== ""){
            $('#words').append('<li>'+ $('#txtWord').val()+'</li>');
            $('#txtWord').val('');
        }
    });
});

例

http://jsfiddle.net/AfNgH/

于 2013-08-28T19:36:50.560 に答える