jQuery / 标签输入 - 按内容选择元素答案

【问题标题】：jQuery / Tags Input - Select element by its contentjQuery / 标签输入 - 按内容选择元素
【发布时间】：2016-11-11 13:47:41
【问题描述】：

感谢您能帮助我解决我的问题。我有 20-30 个这样的元素：

<div class="file file-unchosen">
  <div class="file-name-title">
    "File-title"
  </div>
</div>

.file 用于块的 css 样式

我有bootstrap tags input list 可以存储所选文件的功能：

$('.file').click(function() {
  $(this).toggleClass('file-unchosen file-chosen');
  function addWork(elem) {
    var workname = $(elem).find('.file-name-title').text();
    $('#chosen-works-list').tagsinput('add', workname);
  };
  addWork(this);
});

问题是，当我从标签输入列表中删除 .file 时，我无法理解如何再次取消选择它。现在我正处于这样的中间（无论如何都不起作用）：

$('#chosen-works-list').on('itemRemoved', function(event) { //when tag is removed from tags list
  var chosenWorks = [];
  $('.file-chosen').each(function(i,elem) { //we take all of the chosen files
  console.log(elem); //log them
  chosenWorks.push($(elem).find('.file-name-title').text().toString());
                }); //push them to array
  var delWork = event.item; //define deleting tag
  ...and I don't know what to do next..
 });

理论上，下一步必须检查 $(.file-chosen .file-name).text() 是否等于 $(delWork) 并切换其类，但无法弄清楚如何做到这一点。

【问题讨论】：

标签： jquery bootstrap-tags-input

【解决方案1】：

试试这个：

<div class="file file-unchosen" data-content="deleted-tag-content">

然后像这样操作它：

$('.file[data-content="'+ delWork +'"]').toggleClass('file-unchosen file-chosen');

不要犹豫，使用数据属性，并通过它们进行查询。

【讨论】：