Question

我有两个选择菜单。第二个选择菜单取决于为第一个选择菜单选项选择的内容。当我进行第一个选择时，所有列出的项目都会消失。

预期行为是所有项目最初都会显示。当我选择第一个选项（即新闻和媒体）时，只会显示新闻文章。当我选择年份时，只会显示该年份的文章。

//news media array
const allArticles = [
  {
    company: "Company 1",
    date: "March 26, 2020",
    articleTitle:
      "Article Title",
    articleLink: "#",
    articleType: "news and media"
  },
  {
    company: "Company 2",
    date: "November 17, 2019",
    articleTitle:
      "Article Title",
    articleLink: "#",
    articleType: "news and media"
  },  
  {
    company: "Company 3",
    date: "March 15, 2017",
    articleTitle:
      "Article Title",
    articleLink: "#",
    articleType: "analysis"
  },
  {
    company: "Company 4",
    date: "January 3, 2016",
    articleTitle:
      "Article Title",
    articleLink: "#",
    articleType: "analysis"
  },  
  {
    company: "Company 5",
    date: "March 13, 2014",
    articleTitle: "Aritcle Title",
    articleLink: "#",
    articleType: "press"
  },
  {
    company: "Company 6",
    date: "March 6, 2013",
    articleTitle: "Article Title",
    articleLink: "#",
    articleType: "press"
  }
];

//sort and substring year
allArticles.sort(function (a, b) {
  if (a.date.substr(-4) > b.date.substr(-4)) {
    return -1;
  }
  if (a.date.substr(-4) < b.date.substr(-4)) {
    return 1;
  }
  return 0;
});

function allArticlesTemplate(news) {
  return `
    <div class="list article ${news.articleType} ${news.date.substr(-4)}">
      <ul>
        <li><strong>Company:</strong> ${news.company}</li>
        <li><strong>Start Date:</strong> ${news.date}</li>
        <li><strong>Title:</strong> <a href="${
          news.articleLink
        }" target="_blank">${news.articleTitle}</a></li>
        <li><strong>Type:</strong> ${news.articleType}</li>
      </ul>
    </div>
  `;
}

//output array data
document.getElementById("newsList").innerHTML = `${allArticles
  .map(allArticlesTemplate)
  .join(" ")}`;

//filters
var articles = document.getElementsByClassName("article");

var years = {
  news: [2020, 2019],
  analysis: [2017, 2016],
  press: [2014, 2013]
};

const select = document.querySelector("#storyYear");
let selectedCategory, selectedYear;

function changeType(value) {
  select.options.length = 0;
  select.innerHTML = '<option value="" disabled selected>Year</option>';
  selectedCategory = value;
  years[value].forEach((e) => {
    const option = document.createElement("option");
    option.text = e;
    select.insertAdjacentElement("beforeend", option);
  });
  [...document.querySelectorAll(".article")].forEach((article) => article.classList.add("hidden")); // reset articles
}

function changeYear(value) {
  selectedYear = value;
  [...document.querySelectorAll("." + selectedCategory)].forEach((el) => {
    el.classList.contains(selectedYear)
      ? el.classList.remove("hidden")
      : el.classList.add("hidden");
  });
}

//resetting filters
let filterSelection = document.querySelector("#storyType");
filterSelection.addEventListener("change", function () {
  selectedFilter.classList.remove("hidden");
});

function clearSelection() {
  storyType.options[0].selected = "selected";
  storyYear.options[0].selected = "selected";
  selectedFilter.classList.add("hidden");
  [...document.querySelectorAll(".article")].forEach((article) =>
    article.classList.remove("hidden")
  ); // reset articles
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

.hidden {
  display: none;
}

button.clear {
  border: 0;
  background: #fff;
}

<div class="filter__settings">
  <div class="filter__settings--type">
    <span>filter by</span>
  </div>
  <select name="storyType" class="filter__settings--type" id="storyType" onChange="changeType(this.value);">
    <option value="" selected="selected" disabled="disabled">Story Type</option>
    <option value="news">News and Media</option>
    <option value="analysis">Analysis</option>
    <option value="press">Press Releases</option>
  </select>

  <select name="year" class="filter__settings--type" id="storyYear" onChange="changeYear(this.value);">
    <option value="" disabled="disabled" selected="selected">Year</option>
  </select>
  <div class="filter__settings--type">
    <button class="clear hidden" id="selectedFilter" onclick="clearSelection()">clear filters</button>
  </div>
</div>

<div id="newsList"></div>

Answer 1

您可以在“重置文章”下添加几行：

 res=[...document.querySelectorAll(".article")].filter((article) => article.classList.contains(value));
 res.forEach(x=>x.classList.remove('hidden'))

演示：https://jsfiddle.net/rjvs8g6k/

因此，过滤所需的项目，并从中删除“隐藏”类。附注我想您可以使用相同的方法按年份过滤。

如何在选择第二个选择菜单选项之前显示所有项目？

1 个答案: