使用侧边栏响应的动态面包屑

Question

我有一个侧边栏来过滤带有一些参数的人，比如城市和性别。我需要面包屑，这样当我点击性别或城市时，它会破坏新的面包屑，但它还必须保存以前的参数。像这样：

Home / sex / male / city / NY

但我有一个执行此操作的 jquery 代码：

Home  / Sex /male (and when i click on city it does this:)

Home / City / NY (it erase the other)

我把代码留在这里：

  $('.items label').on('click', function() {
  var $this = $(this),
  $bc = $('<div class="item"></div>');

  $this.parents('li').each(function(n, li) {
      var $a = $(li).children('label').clone();
      ($a.addClass("btn btn-default")).removeAttr("style margin-left");
      $bc.prepend($a);
  });
    $('.btn-breadcrumb').html( $bc.prepend('<a href="#Home" class="btn btn-default"><i class="glyphicon glyphicon-home"></i></a>') );
    return false;
})

http://jsfiddle.net/mPsez/3/ 这是我从这个页面得到的一个例子。这段代码的问题和我一样；当您单击 test1、test2 或 test3 时，它会删除前一个。

Answer 1

试试这个：

//If we click on the anchor...
$('.items a').on('click', function () {
    var $this = $(this),
        $bc = $(".breadcrumb");

    //We store the current path on the breadcrumb.
    var previousValue = $bc.html();

    //We delete the content of the breadcrumb.
    $bc.html("");

    //For each li item...
    $this.parents('li').each(function (n, li) {
        //we make a copy of the child anchor as we will want the same behaviour on our
        //breadcrumb.
        var $a = $(li).children('a').clone();
        //and we attach the clone after the previous clone if there is any. We also
        //insert a separator.
        $bc.append(' / ', $a);
    });

    //Once we are done we attach our old value to the beginning of the breadcrumb.
    $bc.prepend(previousValue);

    //and we cancel the default behaviour of the anchor.
    return false;
})

基本上我存储了以前的值，删除了面包屑并将旧值与新值结合起来。