Link-jQueryをクリックして入力フィールドを入力してください

Question

jqueryを使用してテキストを入力フィールドに入力するには？

テキストは動的に生成されるため、値は事前にわかっていません。と例えば

：私は

<input id="tag" type="text" name="tags" value=""> 

<p> 
    <a class="tag">aaa</a><br/> 
    <a class="tag">bbb</a><br/> 
    <a class="tag">ccc</a><br/> 
    <a class="tag">ddd</a><br/> 
    <a class="tag">eee</a> 
</p> 

この

$('a.tag').live('click', function(e){ 
    $('#tag').val(this.innerHTML); 
    return false; 
}); 

と試みるが、これは、入力フィールドに1つのタグだけを置く、私はこの

のようなものを置く必要があります

<input id="tag" type="text" name="tags" value="aaa, bbb, ccc, eee"> 

ここに実例があります http://jsfiddle.net/Kaf3V/4/

Answer 1

あなたは既に追加されたリンクを削除できるように、選択されたリンクを追跡するためにcssクラスを使用することができます。

$('a.tag').live('click', function(e){ 

    // toggle selected class 
    $(this).toggleClass('selected'); 

    // make a collection of tags 
    var newTag = []; 
    $('a.tag.selected').each(function(){ 

     // add value; 
     newTag.push($(this).text()); 
    }); 
    $('#tag').val(newTag.join(', ')); 

    return false; 
}); 

デモについては、jsFiddleを参照してください。

注：これは、重複している場合、またはリンクがクリックされた順序が重要でない場合にのみ機能します。

Answer 2

現在の値をとり、新しい値：$('#tag').val($('#tag').val() + this.innerHTML);を追加すると、データ配列を使用したり、要素に.data（）を追加して同じ値を複数回追加しないようにすることができます。