Question

我有一个表单输入和标签列表。如果单击列表中的标记，它将被添加到输入的值中。这工作正常。但...

现在，如果我在标签上单击两次 - 它会在输入中添加两次。我想检查重复项，如果在输入中找到标签，请不要添加标签，但如果再次点击链接，则将其从输入中删除。

另外，如果输入中没有这样的标记，也不要突出显示它。

我非常确定我应该获取输入的当前值并在其中搜索重复项，但是......我尝试使用indexOf并且它根本不起作用。

// clear input on start
$('#form_tags').val( '' );

// add a tag when clicked
$('#add-tag > a').on( 'click', function( event ) {
  add_tag( $(this).data( 'slug' ) )
  $(this).css( 'background-color', '#e0e0e0' )
  event.preventDefault()
})

function add_tag( tag ) {
  // input element
  var input = $('#form_tags');
  // current input value
  var curr = input.val();

  // --- duplicate or not? add or remove? ---

  // update the value of the input
  input.val( curr + tag + ', ' )
}

这里是jsfiddle。

Answer 1

我使用其他add_tag函数更新您的小提琴：Fiddle：

  var tags = [];
  function add_tag( tag ) {
      if (~tags.indexOf(tag)) return;
      tags.push(tag);
      var input = $('#form_tags');
      input.val( tags.join(', '));
  }

要删除，请点击两次：Fiddle

  var tags = [];
  function add_tag( tag ) {
     var i = tags.indexOf(tag);
      if (~i) {
        tags.splice(i, 1);
      } else {
       tags.push(tag);
      }
    $('#form_tags').val( tags.join(', '));
  }

Answer 2

使用标签数组：

// clear input on start
$('#form_tags').val( '' );
var tags = [];

// add a tag when clicked
$('#add-tag > a').on( 'click', function( event ) {
  add_tag( $(this).data( 'slug' ) )
  $(this).css( 'background-color', '#e0e0e0' )
  event.preventDefault()
})

function add_tag(tag) {
    if (tags.indexOf(tag) > -1) {
        tags.push(tag);
        updateTags();
    }
}

function updateTags() {
    $('#form_tags').val(tags.join(', '));
}

禁止从我的代码中复制标记

2 个答案: