时间戳

首页 > 解决方案 > 在自定义下拉列表中选择“全部”选项时，如何不显示“清除过滤器”？

javascript - 在自定义下拉列表中选择“全部”选项时，如何不显示“清除过滤器”？

问题描述

在此下拉菜单中，如果选择了过滤选项，我可以选择显示“清除过滤器”文本。如果我单击“清除过滤器”，它就会消失，所有卡片都会返回。

我遇到的问题是，如果使用“全部”选择​​，我不想显示“清除过滤器” 。如果选择“全部”，则应显示所有卡片。

完整的Codepen在这里。

我的重点领域是：

//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();
}

标签： javascript

解决方案

您可以更改“重置按钮”事件侦听器。您可以根据当前选择强制切换它，而不是添加hidden类并删除selected-clearFilter（不确定这是做什么的......） 。检查两者是否都是."all"

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

此外，您应该使用 初始化您的变量"all"，否则这仅在您至少更改两个值一次后才有效。

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

推荐阅读