javascript - 通过 onclick 到 textarea 添加和删除多个标签

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/