当选择另一个过滤器时，删除活动类

Question

我正在尝试使用Ajax按产品标签过滤收藏页中的产品。我已按照本教程进行操作： https://vyeung.wordpress.com/2013/09/05/advanced-ajax-shopify-collection-tags-filter/。 我试图在下拉列表中显示此内容，因此我将.active类添加到了'All'div中，因此始终在首次加载页面时显示。其余的选项div首先被隐藏。一旦尝试选择其他过滤器，我将尝试删除.active类，但这似乎不起作用。

这是代码：

{% assign all_filter_tags = '' %}
{% if collection.url != '' %}
  {% capture url %}{{ collection.url }}{% if new_tags != '' %}/{{ new_tags }}{% endif %}{% endcapture %}
{% else %}
  {% capture url %}/collections/all{% if new_tags != '' %}/{{ new_tags }}{% endif %}{% endcapture %}
{% endif %}
<div class="all filter-item active">{{ 'All ' | link_to: url }}</div>
{% for link in linklists[filter-by-tag].links %}
  {% if collection.all_tags contains link.title %}
    {% capture all_filter_tags %}{{ all_filter_tags }},{{ link.title }},{% endcapture %}
  {% endif %}
{% endfor %}
{% assign new_tags = '' %}
{% for tag in current_tags %}
  {% unless all_filter_tags contains tag %}
    {% capture new_tags %}{{ new_tags }}+{{ tag | handle }}{% endcapture %}
  {% endunless %}
{% endfor %}
{% capture new_tags %}{{ new_tags | remove_first: '+' }}{% endcapture %}
{% for link in linklists[filter-by-tag].links %}
  {% if collection.all_tags contains link.title %}
    {% if current_tags contains link.title %}
      <div class="{{ link.title | handle }} active filter-item">{{ link.title | link_to_remove_tag: link.title }}</div>
    {% else %}
      {% if collection.url != '' %}
        {% capture url %}{{ collection.url }}/{% if new_tags != '' %}{{ new_tags }}+{% endif %}{{ link.title | handle }}{% endcapture %}
      {% else %}
        {% capture url %}/collections/all/{% if new_tags != '' %}{{ new_tags }}+{% endif %}{{ link.title | handle }}{% endcapture %}
      {% endif %}
      <div class="{{ link.title | handle }} filter-item">{{ link.title | link_to: url }}</div>
    {% endif %}
  {% endif %}
{% endfor %}

JS：

$('.filter').click(function(){
  $(this).find('.filter-item').css('display', 'block');
});

     $(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 .filter-list .filter-item a, #filter-2 .filter-list .filter-item 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();
            $('.filter-item', ul).removeClass('active');
            $('.filter-item 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();
            $('.filter-item', ul).removeClass('active');
            $('.all.filter-item', ul).removeClass('active');
            $('.filter-item a', ul).removeAttr('title');

            //add the active tag onto the new filter that was clicked
            $(this).parent().addClass('active');
            $(this).attr('title', 'Remove tag ' + $(this).text());
        }

        var activeBrand = '';
        if ($('#filter-1 ul .filter-item.active a').length > 0) {
            activeBrand = $('#filter-1 .filter-list .filter-item.active a').text();
        }
        var activeColor = '';
        if ($('#filter-2 ul .filter-item.active a').length > 0) {
            activeColor = $('#filter-2 .filter-list .filter-item.active a').text();
        }

        var selectedBrand = '';
        if ($(this).parents().hasClass('brands') && !isRemoveFilter) {
            selectedBrand = $(this).text();
        }
        var selectedColor = '';
        if ($(this).parents().hasClass('colors') && !isRemoveFilter) {
            selectedColor = $(this).text();
        }

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

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

        var newBrand = selectedBrand || activeBrand;
        var newColor = selectedColor || activeColor;
        //console.log('newBrand = ' + newBrand);
        //console.log('newColor = ' + newColor);

        url = collectionUrl + "/";

        if (newBrand != '' && newColor != '') {
            url += newBrand + "+" + newColor;
        } else if (newColor != '') {
            url += newColor;
        } else if (newBrand != '') {
            url += newBrand;
        }

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

});