显示所有选定的过滤器

Question

我正在使用javascript / ajax使用标签过滤我的收藏集。这一切都很好，但是我还需要在页面顶部显示所有当前选择的过滤器，而我正努力使其工作。

这是过滤器的代码：

<div class="col-filter">
  <div class="col-filter-item">
  <h2>Filters</h2>
  <div class="filter-icon">
    {% include 'icon-filter' %}
  </div>
</div>
<div class="col-filter-item">
  <p class="header">Selected</p>
  <div class="selected-filter"></div>
</div>
{% for i in (1..3) %}
{% capture filter_label %}filter_no_{{ i }}_label{% endcapture %}
{% if settings[filter_label] != blank %}
<div class="filter tags {{ settings[filter_label] }}" id="filter-{{ i }}">
<p class="header">{{ settings[filter_label] }}</p>
<ul>
  {% capture filter_linklist %}filter_no_{{ i }}_linklist{% endcapture %}
  {% include 'filter-by-tag' with settings[filter_linklist] %}
</ul>
</div>
{% endif %}
{% endfor %}
</div>

还有JS：

<script>
    $(function () {
        var popped = ('state' in window.history && window.history.state !== null),
            initialURL = location.href;

        //function to handle the scenarios where back and forward buttons used in browser
        $(window).bind("popstate", function (e) {
            // Ignore inital popstate that some browsers fire on page load
            var initialPop = !popped && location.href == initialURL;
            popped = true;
            if (initialPop) {
                return;
            }
            ajaxLoadPage(location.href);
        });

        //the ajax function that does the AJAX calls to get the products and load them into the grid
        var ajaxLoadPage = function (url) {
            $.ajax({
                type: 'GET',
                url: url,
                data: {},
                complete: function (data) {
                    $('#collection').html($("#collection", data.responseText).html());

                    history.pushState({
                        page: url
                    }, url, url);
                }
            });
        }

        {% capture pathUrl %}{% if collection.handle %}{% capture url %}/collections/{{ collection.handle }}{% endcapture %}{{ url }}{% elsif collection.all_products_count > 0 and collection.products.first.type == collection.title %}{{ link_to_type }}{% elsif collection.all_products_count > 0 and collection.products.first.vendor == collection.title %}{{ link_to_vendor }}{% endif %}{% endcapture %}

        var collectionUrl = window.location.protocol+'//'+window.location.hostname+'{{ pathUrl}}';

        //this detects one of the filters being clicked that should then
        //decide what URL to call in order to get the newly filtered product grid
        $("#filter-1 ul li a, #filter-2 ul li a, #filter-3 ul li a").click(function (event) {
            event.preventDefault();
            var title = $(this).attr('title');
            var self = this;


            // check if the click is on a "remove tag" filter
            var isRemoveFilter = false;
            if ($(this).parent().hasClass('active')) {
                $(this).parent().removeClass('active');
                $(this).removeAttr('title');
                isRemoveFilter = true;
            } else if ($(this).parent().hasClass("all")) {
                //check if "all brands" or "all colors" clicked
                var ul = $(this).parent().parent();
                $('li', ul).removeClass('active');
                $('li a', ul).removeAttr('title');
                isRemoveFilter = true;
            } else {
                //otherwise it means click on an unfiltered tag
                //remove other "Remove tag" in same filter row
                var ul = $(this).parent().parent();
                $('li', ul).removeClass('active');
                $('li a', ul).removeAttr('title');

                //add the active tag onto the new filter that was clicked

                $(this).parent().addClass('active');
                var filter_clone = $(this).parent().html();
                $(this).attr('title', 'Remove tag ' + $(this).text());
                $(filter_clone).clone().appendTo(".selected-filter");
            }

            var activeColour = '';
            if ($('#filter-1 ul li.active a').length > 0) {
                activeColour = $('#filter-1 ul li.active a').text();
            }
            var activeAttribute = '';
            if ($('#filter-2 ul li.active a').length > 0) {
                activeAttribute = $('#filter-2 ul li.active a').text();
            }
            var activeRating = '';
            if ($('#filter-3 ul li.active a').length > 0) {
                activeRating = $('#filter-3 ul li.active a').text();
            }

            var selectedColour = '';
            if ($(this).parents().hasClass('Colour') && !isRemoveFilter) {
                selectedColour = $(this).text();
            }
            var selectedAttribute = '';
            if ($(this).parents().hasClass('Attribute') && !isRemoveFilter) {
                selectedAttribute = $(this).text();
            }
            var selectedRating = '';
            if ($(this).parents().hasClass('Rating') && !isRemoveFilter) {
                selectedRating = $(this).text();
            }

            //console.log('activeBrand = ' + activeBrand);
            //console.log('activeColor = ' + activeColor);
            //console.log('selectedBrand = ' + selectedBrand);
            //console.log('selectedColor = ' + selectedColor);

            var url = $(this).attr('href');

            var newColour = selectedColour || activeColour;
            var newAttribute = selectedAttribute || activeAttribute;
            var newRating = selectedRating || activeRating;
            //console.log('newBrand = ' + newBrand);
            //console.log('newColor = ' + newColor);

            url = collectionUrl + "/";

            if (newColour != '' && newAttribute != '' && newRating != '') {
                url += newColour + "+" + newAttribute + "+" + newRating;
            }
            else if (newColour != '' && newRating != '' && newAttribute == '') {
                url += newColour + "+" + newRating;
            }
            else if (newColour != '' && newAttribute != '' && newRating == '') {
                url += newColour + "+" + newAttribute;
            }
            else if (newAttribute != '' && newRating != '' && newColour == '') {
                url += newAttribute + "+" + newRating;
            }
            else if (newColour != '' && newRating == '' && newAttribute == '' ) {
                url += newColour;
            } else if (newAttribute != '' && newColour == '' && newRating == '') {
                url += newAttribute;
            }
            else if (newRating != '' && newColour == '' && newAttribute == '') {
                url += newRating;
            }

            //console.log(url);
            ajaxLoadPage(url);
        });

    });
</script>

如您所见，我试图克隆选定的项目并将其附加到选定的过滤器div上，但这种工作方式只是克隆与我所追求的链接不完全相同的链接，因为您还需要能够从顶部的选定过滤器中删除过滤器。只是想知道是否有人做了类似的事情并找到了一种方法来做到这一点？