单击或悬停在引导标签输入标签上时如何获取（对象）值？答案

【问题标题】：How to get (object) values when clicking on or hovering over bootstrap tagsinput tags?单击或悬停在引导标签输入标签上时如何获取（对象）值？
【发布时间】：2017-06-28 02:18:44
【问题描述】：

我知道我可以通过以下方式获取所有（对象）值： $("input").tagsinput('items') 如Bootstrap tagsinput webpage中所述

我想做的是在将鼠标悬停在标签上时获取特定值。

问题是悬停事件应该在span 元素上，而示例中的值似乎只能从input 元素中恢复。

这是带有代码的jsfiddle。一直向下滚动以查看我想从中获取值的事件类型。例如，当将鼠标悬停在“华盛顿”上时，我希望看到 { "value": 4 , "text": "Washington" , "continent": "America" }

【问题讨论】：

您有很多代表点可以在不提供 MCVE 的情况下提出问题 stackoverflow.com/help/mcve 向我们展示您的代码。
老实说，我认为 MCVE 在这里并不完全适用，因为它是一个通用问题，而不是“关于您（我的）代码引起的问题”。但是，如果它可以帮助人们理解@mjw 建议的问题，我很乐意提供一个 jsfiddle
使用 DOM 检查器，在表示标签的 span 元素上似乎没有比其文本内容更多的“信息”。所以我认为你必须去使用它来查找 tagsinput 数组中的相应对象...
@CBroe 是的，问题是文本内容可能会重复，所以我应该得到点击跨度的索引。但我认为应该有一个更简单的方法来做到这一点......

标签： javascript jquery html twitter-bootstrap bootstrap-tags-input

【解决方案1】：

这就是我解决这个问题的方法。正如@CBroe 建议的那样，这个想法是从输入元素中获取所有项目，然后尝试获取悬停元素的索引。

$(".tag").hover(function() {
  //get all data items  
  var allTags = $("#inputTags").tagsinput('items');

  //get all tag elements
  var listOfChildren = Object.keys(this.parentElement.children)
  //find out which index I hovered over
  var tagIndex;      
  var that = this;
  listOfChildren.forEach(function(ee, ff) {
    if (that.parentElement.children[ee] == that)
      tagIndex = ff;
  });
  // get the corresponding data item
  var objectDataClicked = allTags[tagIndex];

  alert(objectDataClicked.value + '-' + objectDataClicked.text + '-' + objectDataClicked.continent)
})

你可以找到jsfiddle here

【讨论】：