Question

我在使用切换功能工作时遇到了一些麻烦，需要有人帮我解释一下。

我的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中看到我想要达到的目标。通过在末尾添加一个值（如面包屑链接），它正是我想要它的工作方式，但是当我再次点击它时它没有被删除。

Answer 1

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

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

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

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

Answer 2

<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>

Answer 3

尝试这个...

 $(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);
        }

它正在运作HERE

希望这可以帮助你!!

Answer 4

我喜欢passcod的解决方案 - 这是一个替代方法，它将div中的元素包装起来并按字母顺序排列。

JSFiddle here。 sort函数来自http://www.wrichards.com/blog/2009/02/jquery-sorting-elements/。

$(".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');
});

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

4 个答案: