javascript - 单独元素中的jQuery toggle()文本

我在启用切换功能时遇到了一些麻烦，需要有人帮助向我解释。

我的HTML（简体）：

<div id="filter_names"></div>

<div class="item">Option 1</div>
<div class="item">Option 2</div>
<div class="item">Option 3</div>
<div class="item">Option 4</div>

我的jQuery（简体）

$(".item").click(function(){

  var tagname = $(this).html();
  $('#filter_names').append(' > '+tagname);

  $(".loading").show();

});

如您所见，我将点击项的值附加到顶部的div中。这可以正常工作，但是当我再次单击它时我需要将其删除。

我很确定它需要一个toggle（）函数，但是到目前为止，我的尝试是徒劳的。

一些指导将不胜感激。

编辑：您可以在此JSfiddle中看到我想要实现的目标。通过将值附加到末尾（如面包屑链接），它确实可以达到我想要的效果，但是当我再次单击它时并没有将其删除。

最佳答案

您需要查看#filter_names内容，并检查单击的标记的值是否已包含，然后将其删除，否则将其添加：

  if (filternames.indexOf(tagname) === -1) {
    $('#filter_names').append(' > '+tagname);
  } else {
    $('#filter_names').text(filternames.replace(' > '+tagname, ''));
  }

工作提琴：http://jsfiddle.net/passcod/Kz3vx/

请注意，如果一个标签的值包含在另一个标签的值中，则可能会得到奇怪的结果。