jQuery切换（）文本在单独的元素

我有一些麻烦得到切换功能的工作，需要有人来帮我解释一下。jQuery切换（）文本在单独的元素

我的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(); 

});

正如你可以看到我追加勾选项目的价值在顶部的股利。这工作正常，但我需要它被删除，当我再次点击它。

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

一些指导将不胜感激。

编辑：你可以看到我想在这JSfiddle实现。它的工作方式正如我想要的那样，通过在最后添加一个值（如面包屑链接），但当我再次单击它时不会被删除。

来源

2011-06-01 dangermark

看到我更新answer..with演示 – Vivek 2011-06-01 05:28:56

你需要看看#filter_names内容，并检查是否点击的标签的价值已经包括，然后将其删除，如果是这样，或者将其添加否则：

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

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

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

来源

2011-06-01 05:15:40

这是完美的，谢谢你为我解释它。我开始越来越多地理解jQuery。非常感谢。 – dangermark 2011-06-01 05:32:56

试试这个...

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

当你点击的div，这将增加或者这些类。或者如果你只是想在第二次点击时删除这个类，那么你应该在你的点击处理程序中写入。

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

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

EDITED -----
删除附加HTML你可以试试这个...

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

它的工作HERE

希望这可以帮助你！

来源

2011-06-01 05:00:58 Vivek

我相信首次点击后，杀死它，因为选择将不再能够找到原点击“.item” – Sparky 2011-06-01 05:03:35

对不起，这不是我”之后。我需要单击“item”div的值转到“filter_names”div，然后在再次单击div时删除它。toggleClass只是我在那里的一些额外的东西，只是忽略它而已。 – dangermark 2011-06-01 05:06:36

@ dangermark-see updated answers – Vivek 2011-06-01 05:08:03

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

来源

2011-06-01 05:16:14 TheVillageIdiot

几乎在那里...也需要删除'>'。 – 2011-06-01 05:20:41

@Alex R.现在如果你点击'Item 1'，＃'filter_names'将会有'> Item 2> Item 3''，现在将'>'删除为'> Item 1> Item 2> Item 3'' – TheVillageIdiot 2011-06-01 05:29:25

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

JSFiddle here。排序功能来自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'); 
});

来源

2011-06-01 09:56:30

jQuery切换（）文本在单独的元素

回答

相关问题