Блог

В этом выпадающем меню у меня есть опция для отображения фрагмента текста «Очистить фильтры», если выбрана опция фильтрации. Если я нажму «Очистить фильтры», то он исчезнет, и все карты вернутся.

Проблема, с которой я сталкиваюсь, заключается в том, что я НЕ хочу отображать «Очистить фильтры», если используется выбор «Все». Если выбрано «Все», то должны отображаться все карты.

Полный кодовый код находится здесь.

Моя область деятельности-это:

 //clear selection
function clearSelection() {
  document.querySelector(".custom__select-wrapper .story-sel h6").textContent = "STORY TYPE";
  document.querySelector(".custom__select-wrapper .year-sel h6").textContent = "YEAR";
  document.querySelector(".custom__option.selected[data-type]").classList.remove("selected");
  document.querySelector(".custom__option.selected[data-year]").classList.remove("selected");
  document.querySelector(".custom__option[data-type='all']").classList.add("selected");
  document.querySelector(".custom__option[data-year='all']").classList.add("selected");

  selectedFilter.classList.add("hidden");

  let articles = [...document.querySelectorAll(".article")];

  current_story = "all";
  current_year = "all";

  articles.forEach(function (article) {
    article.classList.add("hidden");
    article.classList.add("chosen");
  });
  loadInitial();
  checkLoadMore();
  checkEmpties();
}
 

Вы можете изменить прослушиватель событий «кнопка сброса». Вместо добавления hidden класса и удаления selected-clearFilter (не уверен, что это делает…) вы можете принудительно переключить его на основе текущего выбора. Проверьте, так ли это "all" .

 //reset button
let filterSelection = document.querySelectorAll(".dropdown").forEach(dropdown => {
  dropdown.addEventListener("click", function () {
    let allSelected = current_story === 'all' amp;amp; current_year === 'all';
    selectedFilter.classList.toggle("hidden", allSelected);
    selectedFilter.classList.toggle('selected-clearFilter', !allSelected)
  })
});
 

Кроме того , вы должны инициализировать свои переменные с "all" помощью, в противном случае это сработает только после того, как вы изменили оба значения хотя бы один раз.

 let current_story = "all",
  current_year = "all";