Изотоп: добавить div к выбранным элементам - PullRequest
Новая
       4

Изотоп: добавить div к выбранным элементам

0 голосов
/ 07 марта 2019

Я использую Isotope Layout для фильтрации элементов на странице, это успешно работает с несколькими флажками.

Как видите, я смог получить счетчик результатов и вывести значение выбранного фильтра.

Однако я озадачен, потому что я хотел бы обернуть каждый из выбранных фильтров в классе, чтобы они не были просто строкой с .class

Вот мой сценарий: 

// Selected filters
let $filters = $('.filters input');
let $resultCount = $('.filter-box__result-count');

// Inititialize Isotope
const $grid = $('#grid').isotope({
  itemSelector: '.grid-item',
  percentagePosition: true,
  animationEngine: 'best-available', //CSS3 if browser supports it, jQuery otherwise
  animationOptions: {
    duration: 800,
  },
  filter: '*',
  masonry: {
    columnWidth: '.grid-item',
    gutter: 30,
  },
})

// The items in the Isotope grid
const $items = $grid.data('isotope');

/**
 * Each time an image is loaded, re-layout the grid.
 * This prevents any weird overlapping.
 */
$grid.imagesLoaded().progress(function () {
  $grid.isotope('layout');
});

/**
 * A change event for the category toggler so we can tell the script to add the div containing categories
 */
$('.toggler--category input').change(function () {
  if ($(this).is(':checked')) {
    $('.toggler--tag').addClass('filter-box__toggler--disabled');
    $('.filter-box__categories').show();
  } else {
    $('.toggler--tag').removeClass('filter-box__toggler--disabled');
    $('.filter-box__categories').hide();
  }
})

/**
 * A change event for the tag toggler so we can tell the script to add the div containing tags
 */
$('.toggler--tag input').change(function () {
  if ($(this).is(':checked')) {
    $('.toggler--category').addClass('filter-box__toggler--disabled');
    $('.filter-box__tags').show();
  } else {
    $('.toggler--category').removeClass('filter-box__toggler--disabled');
    $('.filter-box__tags').hide();
  }
})

/**
 * Apply filters to Isotope when any filters are updated.
 * This will also update the result count and add some block elements.
 */
$filters.change(function () {

  // An empty array to contain filters
  let $selectedFilters = [];
  let $filterName = [];

  // Loop through filters and add values if checked
  $('.filters input').each(function (counter, element) {
    if (element.checked) {
      $selectedFilters.push(element.value);
      $filterName.push(element.name);

      // Log values for debugging
      console.log($selectedFilters);
      console.log($filterName);
    }
  })

  // If there are filters in the filters array, join them
  if ($selectedFilters.length > 0) {
    // let $tagContainer = $('<span class="tag-list__tag"></span>');

    $filters = $selectedFilters.join(', ');

    $('.filter-box__applied-filters-area').show();
    $('.filter-box__applied-filters').append($filters);
    $('.filter-box__applied-filters').text($filters);
  } else {
    $filters = '*';
    $('.filter-box__applied-filters-area').hide();
  }

  // Apply filters
  $grid.isotope({
    filter: $filters,
  })

  updateFilterCount();

});

/**
 * Reset all filtering
 */
$('.filter-box__reset-filter').click(function () {

  // Tell Isotope to display everything
  $grid.isotope({
    filter: '*',
  })

  // Hide added divs
  $('.filters').hide();
  $('.filter-box__applied-filters-area').hide();

  // Uncheck all checkboxes
  $('.filter-box__toggler').removeClass('filter-box__toggler--disabled');
  $('.filter-box__toggler input').prop('checked', false);
  $('.filters input').prop('checked', false);

  updateFilterCount();
});

/**
 * Update the count of returned items from Isotope
 */
function updateFilterCount() {
  $resultCount.text($items.filteredItems.length + ' Results');
}

Некоторые из вышеперечисленных просто используются, чтобы скрыть или показать div в разных точках, но в любом случае у меня есть класс с именем tag, который я хотел бы обернуть вокруг каждого выбранного фильтра.

Есть ли способ разделить мой массив фильтров и обернуть каждую строку классом?

...