Javascript jQuery toggle（）单独元素中的文本

我有一些麻烦得到切换功能的工作，需要有人帮助解释给我

我的HTML（简化）：

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

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

如能提供一些指导，将不胜感激

编辑：您可以看到我希望在这方面取得的成就。通过在末尾添加一个值（如面包屑链接），它正按照我所希望的方式工作，但当我再次单击它时，它不会被删除。

试试这个

 $(this).toggleClass("item-click item");

这将在您单击div时交替添加这些类。或者，如果您只想在第二次单击时删除此类，则应将其写入您的单击处理程序中

if( $(this).hasClass("item-click")){

     $(this).removeClass("item-click");
}

已编辑——
要删除附加的html，可以尝试以下操作

 if($(this).hasClass("item-click")){
            $("#filter_names").text("");
        }
        else{
            $('#filter_names').append(tagname);
        }

它起作用了

希望这对你有帮助

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

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

工作小提琴：

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

<script type="text/javascript">
$(function(){
    $(".item").click(function(){
        var $this=$(this);
        var tagname = ' > ' +$this.html();
        //if has item-check class remove tag from filter_names
        if($this.hasClass("item-click")){
            var h=$("#filter_names").text();
            $("#filter_names").text(h.replace(tagname, '' ));
        }
        else{
            $('#filter_names').append(tagname);
        }
        $(this).toggleClass("item-click").toggleClass("item");
    });
});
</script>

$（函数（）{
$（“.item”）。单击（函数（）{
var$this=$（this）；
变量标记名='>'+$this.html（）；
//如果有item check类，则从筛选器名称中删除标记
if（$this.hasClass（“项目单击”））{
var h=$（“#过滤器名称”）.text（）；
$（“#过滤器名称”）.text（h.replace（标记名，”）；
}
否则{
$（“#过滤器名称”）.append（标记名）；
}
$（此）.toggleClass（“项目点击”）.toggleClass（“项目”）；
});
});

我喜欢passcod的解决方案——这里有一个替代方案，它将元素包装在div中并按字母顺序排列

。排序函数来自

$（“.item”）。单击（函数（）{
变量标记名=$（this.html（）；
var target=$（“#过滤器名称”）.find（'div:contains（“>”+标记名+”）；
if（target.is（'*'））{
target.remove（）；
}
else$（“#过滤器名称”）.append（“>”+标记名+”）；
sortAlpha函数（a，b）{
返回a.innerHTML>b.innerHTML？1:-1；
}
$（'filter_names div'）.sort（sortAlpha）.appendTo（'filter_names'）；
});

我相信在第一次单击后会将其终止，因为选择器将无法再找到原始单击的“.item”抱歉，这不是我想要的。我需要单击的“item”div的值转到“filter\u names”div，然后在再次单击该div时将其删除。toggleClass只是我有一个额外的东西，忽略它。没关系，我应该删除它。无论如何，谢谢。当您单击同一个div或任何带有类项的div时，是否要删除它？几乎就在那里。。。还需要删除

。@Alex R.现在，如果你点击

项目1

它将删除

，作为

>项目1>项目2>项目3

，如果你现在点击

项目1

，它将具有

>项目2>项目3

，请查看我的更新答案..这是完美的，谢谢你为我解释它。我开始越来越了解jQuery。非常感谢。

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

<script type="text/javascript">
$(function(){
    $(".item").click(function(){
        var $this=$(this);
        var tagname = ' > ' +$this.html();
        //if has item-check class remove tag from filter_names
        if($this.hasClass("item-click")){
            var h=$("#filter_names").text();
            $("#filter_names").text(h.replace(tagname, '' ));
        }
        else{
            $('#filter_names').append(tagname);
        }
        $(this).toggleClass("item-click").toggleClass("item");
    });
});
</script>

$(".item").click(function(){
    var tagname = $(this).html();
    var target = $('#filter_names').find('div:contains("> ' + tagname + '")');
    if (target.is('*')) {
        target.remove();
    }
    else $('#filter_names').append('<div class="appended"> > '+ tagname +'<div>');  
    function sortAlpha(a,b) {
        return a.innerHTML > b.innerHTML ? 1 : -1;
    }
    $('#filter_names div').sort(sortAlpha).appendTo('#filter_names');
});