javascript - テキストエリアにonclickして、複数のタグを追加および削除します

Question

textareaとデータベースからのタグのリスト（すでにクエリされてtextareaの下に表示されている）を含むフォームがあり、これらのタグ（コンマで区切られている）をtextareaに追加し、ユーザーがクリックしたときにタグがすでに存在する場合は削除します。

Answer 1

私はあなたが何を意味するか知っていると思います、このフィドルを見てください http://jsfiddle.net/joevallender/QyqYW/1/

コードは以下です。tagsサーバーから取得されselectedTags、現在の選択の管理された配列です。selectedTagsたとえば、既存のタグ付き投稿を編集する場合など、必要に応じてサーバーからデータを読み込むこともできます。これを行った場合は、click()関数内のコードを独自の関数にリファクタリングして、ドキュメントの準備が整った状態でも実行できるようにします。

何が起こっているかを確認できるように、いくつかのクラスの切り替えとデバッグ画面を含めました。

HTML

<textarea id="tags"></textarea>
<div id="tagButtons"></div>
<div id="debug"></div>

と JavaScript

var tags = [
  'JavaScript',    
  'jQuery',
  'HTML5',    
  'CSS3'
];

var selectedTags = [];

for(var i = 0; i < tags.length; i++) {
  var el = $('<span>').text(tags[i]);
  $('#tagButtons').append(el);
}

$('#tagButtons span').click(function(){
  var val = $(this).text();
  var index = selectedTags.indexOf(val);
  if(index > -1) {
    var removed = selectedTags.splice(index,1); 
    $(this).removeClass('selected');
    $('#debug').prepend($('<div>').html('Removed: ' + removed));
  } else {
    selectedTags.push(val);
    $(this).addClass('selected');
    $('#debug').prepend($('<div>').html('Added: ' + val));
  }
  $('#tags').val(selectedTags.join(', '));
});

編集これは、双方向で機能するものですhttp://jsfiddle.net/joevallender/QyqYW/14/