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/

通过onclick添加和删除多个标记到textarea

1 个答案: