如何选择要显示的特定数量的过滤项目？

Question

我可以在列表中显示所有项目，并且可以使用“加载更多”按钮添加其他项目。但是，如果我选择下拉菜单和其中一种故事类型，我就会得到所有这些类型。

如何只显示所选故事类型中的 4 个，并在点击时加载另外 2 个？

//dropdown
let current_story = "",
  current_year = "";

for (const dropdown of document.querySelectorAll(".custom__select-wrapper")) {
  dropdown.addEventListener("click", function () {
    this.querySelector(".custom__select").classList.toggle("open");
  });
}

for (const option of document.querySelectorAll(".custom__option")) {
  option.addEventListener("click", function () {
    if (!this.classList.contains("selected")) {
      this.parentNode
        .querySelector(".custom__option.selected")
        .classList.remove("selected");
      this.classList.add("selected");
      this.closest(".custom__select").querySelector(
        ".custom__select-trigger h6"
      ).textContent = this.textContent;
      if (this.getAttribute("data-story")) {
        current_story = this.dataset["story"];
        storyFilter(this.dataset["story"]);
      }
    }
  });
}

window.addEventListener("click", function (e) {
  for (const select of document.querySelectorAll(".custom__select")) {
    if (!select.contains(e.target)) {
      select.classList.remove("open");
    }
  }
});

//get all news-item articles
const list = document.querySelectorAll('.news-item.article');

// filter
function storyFilter(className) {
  for (const article of list) {
    article.classList.add("hidden");
    if (article.getAttribute("data-story") === className) {
      article.classList.remove("hidden");
    }
  }
}



//global load more functionality
const loadMore = document.getElementById('loadmore');
const hiddenItems = [...document.querySelectorAll('.news-item.hidden')];

hiddenItems.splice(0, 4).forEach(
  elem => elem.classList.remove('hidden')
);

loadmore.addEventListener('click', function(e) {
  e.preventDefault();
  
  hiddenItems.splice(0, 2).forEach(
    elem => elem.classList.remove('hidden')
  )
  
  if (hiddenItems.length == 0) {
    loadMore.classList.add('hidden');
  }
});

@charset "UTF-8";
.hidden {
  display: none;
}

.show {
  display: block;
}

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

#selectedFilter {
  color: #005fec;
}

@media screen and (min-width: 320px) {
  .filter__settings {
    display: flex;
    flex-direction: column;
  }

  .custom__select-wrapper h6 {
    padding: 0 3px;
    color: #a1b4c4;
    font-weight: 300;
  }

  .custom__select {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .custom__select-wrapper {
    position: relative;
    user-select: none;
    padding: 10px 0;
  }

  .custom__select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    cursor: pointer;
  }

  .custom__select-wrapper h6,
.custom__select-trigger h6 {
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .custom__select-trigger h6 {
    color: #005fec;
    font-weight: 900;
  }

  .custom__select-wrapper #selectedFilter {
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #005fec;
    font-weight: 800;
    padding: 0;
  }

  .custom__options {
    position: absolute;
    display: block;
    background-color: #005fec;
    top: 100%;
    left: 0;
    right: 0;
    border-top: 0;
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
  }
  .custom__options:before, .custom__options:after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 11px;
    border: 11px solid transparent;
    border-bottom-color: #005fec;
  }

  .custom__select-trigger,
.custom__option {
    letter-spacing: 1px;
    font-weight: 800;
    color: #005fec;
    border: 0;
    background: transparent;
  }

  .custom__select.open .custom__options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    color: #fff;
    width: 100%;
  }

  .custom__option {
    position: relative;
    display: block;
    padding: 0 22px 0 20px;
    font-weight: 300;
    color: #fff;
    cursor: pointer;
    transition: all 0.5s;
    font-size: 12px;
    line-height: 12px;
    margin: 1.5em 0;
  }
  .custom__option:hover {
    cursor: pointer;
  }
  .custom__option.selected {
    color: #ffffff;
  }
  .custom__option.selected::before {
    content: "•";
    margin-left: -12px;
    padding-right: 8px;
  }

  /* arrow */
  .arrow {
    position: relative;
    height: 10px;
    width: 10px;
    margin-left: 2em;
  }
  .arrow::before, .arrow::after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 0.1rem;
    height: 100%;
    transition: all 0.5s;
  }
  .arrow::before {
    left: -2px;
    transform: rotate(45deg);
    background-color: #394a6d;
  }
  .arrow::after {
    left: 2px;
    transform: rotate(-45deg);
    background-color: #394a6d;
  }

  .open .arrow::before {
    left: -2px;
    transform: rotate(-45deg);
  }
  .open .arrow::after {
    left: 2px;
    transform: rotate(45deg);
  }

  .arrow::after {
    left: 5px;
    transform: rotate(-45deg);
    background-color: #394a6d;
  }

  .open .arrow::before {
    left: -2px;
    transform: rotate(-45deg);
  }
  .open .arrow::after {
    left: 5px;
    transform: rotate(45deg);
  }
}
@media screen and (min-width: 768px) {
  .filter__settings {
    flex-direction: row;
  }

  .custom__select-trigger {
    justify-content: space-evenly;
    margin-right: auto;
  }

  .filter__settings .custom__select-wrapper {
    margin: 0 2em;
  }

  .custom__select-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .custom__select-wrapper:last-child {
    margin-left: auto;
  }
}

<div class="container" id="listArticles">
  <section class="filter">
    <div class="filter__settings">
      <div class="custom__select-wrapper">
        <h6>filter by</h6>
      </div>
      <div class="custom__select-wrapper">
        <div class="custom__select">
          <div class="custom__select-trigger">
            <h6>Story Type</h6>
            <div class="arrow"></div>
          </div>
          <div class="custom__options" id="storyFilter">
            <span class="custom__option selected">All</span>
            <span class="custom__option" data-story="news">News and Media</span>
            <span class="custom__option" data-story="analysis">Analysis</span>
            <span class="custom__option" data-story="press">Press Releases</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <div id="newsList">
    <div class="news-item hidden article news" data-story="news">News Item</div>
    <div class="news-item hidden article analysis" data-story="analysis">Analysis Item</div>
    <div class="news-item hidden article press" data-story="press">Press Item</div>
    <div class="news-item hidden article news" data-story="news">News Item</div>
    <div class="news-item hidden article analysis" data-story="analysis">Analysis Item</div>
    <div class="news-item hidden article press" data-story="press">Press Item</div>
    
    <div class="news-item hidden article news" data-story="news">News Item</div>
    <div class="news-item hidden article analysis" data-story="analysis">Analysis Item</div>
    <div class="news-item hidden article press" data-story="press">Press Item</div>
    <div class="news-item hidden article news" data-story="news">News Item</div>
    <div class="news-item hidden article analysis" data-story="analysis">Analysis Item</div>
    <div class="news-item hidden article press" data-story="press">Press Item</div>
    
    <div class="news-item hidden article news" data-story="news">News Item</div>
    <div class="news-item hidden article analysis" data-story="analysis">Analysis Item</div>
    <div class="news-item hidden article press" data-story="press">Press Item</div>
    <div class="news-item hidden article news" data-story="news">News Item</div>
    <div class="news-item hidden article analysis" data-story="analysis">Analysis Item</div>
    <div class="news-item hidden article press" data-story="press">Press Item</div>
    
    <div class="news-item hidden article news" data-story="news">News Item</div>
    <div class="news-item hidden article analysis" data-story="analysis">Analysis Item</div>
    <div class="news-item hidden article press" data-story="press">Press Item</div>
    <div class="news-item hidden article news" data-story="news">News Item</div>
    <div class="news-item hidden article analysis" data-story="analysis">Analysis Item</div>
    <div class="news-item hidden article press" data-story="press">Press Item</div>
    
    <div class="news-item hidden article news" data-story="news">News Item</div>
    <div class="news-item hidden article analysis" data-story="analysis">Analysis Item</div>
    <div class="news-item hidden article press" data-story="press">Press Item</div>
    <div class="news-item hidden article news" data-story="news">News Item</div>
    <div class="news-item hidden article analysis" data-story="analysis">Analysis Item</div>
    <div class="news-item hidden article press" data-story="press">Press Item</div>
    <button type="button" id="loadmore">Load More</button>
  </div>  
</div>

Answer 1

首先，由于 querySelectorAll 不返回数组，我们需要创建一个数组。创建后，我们可以隐藏所有元素，然后过滤掉除 className 参数之外的所有元素。现在我们可以从过滤列表的前 4 个元素中删除 hidden。

let filtered;
function storyFilter(className) {  
  let newList = Array.from(list);
  newList.map(x => x.classList.add('hidden'));  
  filtered = newList.filter(x => x.getAttribute("data-story") == className)
  filtered.map((x,i) => {if(i<4)x.classList.remove('hidden')});
}

这为您提供了每个项目的前四项。

要每次点击添加两个新项目，请改用此功能

function loadMore() {
  if (!filtered) return;
  let hiddenItems = filtered.filter(x => x.classList.contains('hidden'));
  hiddenItems.map((x,i) => {if(i<2)x.classList.remove('hidden')});
}

务必在按钮上添加 onclick 并调用该函数。您可以删除代码中用于添加项目的其他部分。

Answer 2

这应该对你有用...

只需创建一个全局变量 resource "aws_instance" "terraform-ec2" { ami = "ami-02f26adf094f51167" instance_type = "t2.micro" tags = var.tag_for_ec2 } 并在调用 filter 时设置它...使用此变量在 storyFilter 函数的切片之前进行过滤。

loadMore

//dropdown
let current_story = "",
  current_year = "";

for (const dropdown of document.querySelectorAll(".custom__select-wrapper")) {
  dropdown.addEventListener("click", function () {
    this.querySelector(".custom__select").classList.toggle("open");
  });
}

for (const option of document.querySelectorAll(".custom__option")) {
  option.addEventListener("click", function () {
    if (!this.classList.contains("selected")) {
      this.parentNode
        .querySelector(".custom__option.selected")
        .classList.remove("selected");
      this.classList.add("selected");
      this.closest(".custom__select").querySelector(
        ".custom__select-trigger h6"
      ).textContent = this.textContent;
      current_story = this.dataset["story"];
      storyFilter(this.dataset["story"]);
    }
  });
}

window.addEventListener("click", function (e) {
  for (const select of document.querySelectorAll(".custom__select")) {
    if (!select.contains(e.target)) {
      select.classList.remove("open");
    }
  }
});

//get all news-item articles

let filter = null;
// filter
function storyFilter(className) {
  filter = className;
  let count = 0;
  [...document.querySelectorAll('.news-item.article')].forEach((article, idx) => {
    article.classList.add("hidden");
    if (filter && article.getAttribute("data-story") !== filter) return;
    if (++count > 4) return;
    article.classList.remove("hidden");
  });
}



//global load more functionality
const loadMore = document.getElementById('loadmore');
const hiddenItems = [...document.querySelectorAll('.news-item.hidden')];

hiddenItems.splice(0, 4).forEach(
  elem => elem.classList.remove('hidden')
);

loadmore.addEventListener('click', function(e) {
  e.preventDefault();
  
  const hiddenItems = [
    ...document.querySelectorAll('.news-item.hidden')
  ].filter(article => !filter || article.getAttribute("data-story") === filter);

  hiddenItems.splice(0, 2).forEach(elem => elem.classList.remove('hidden'));
  
  if (hiddenItems.length == 0) {
    loadMore.classList.add('hidden');
  }
});

@charset "UTF-8";
.hidden {
  display: none;
}

.show {
  display: block;
}

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

#selectedFilter {
  color: #005fec;
}

@media screen and (min-width: 320px) {
  .filter__settings {
    display: flex;
    flex-direction: column;
  }

  .custom__select-wrapper h6 {
    padding: 0 3px;
    color: #a1b4c4;
    font-weight: 300;
  }

  .custom__select {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .custom__select-wrapper {
    position: relative;
    user-select: none;
    padding: 10px 0;
  }

  .custom__select-trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    cursor: pointer;
  }

  .custom__select-wrapper h6,
.custom__select-trigger h6 {
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .custom__select-trigger h6 {
    color: #005fec;
    font-weight: 900;
  }

  .custom__select-wrapper #selectedFilter {
    font-size: 12px;
    line-height: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #005fec;
    font-weight: 800;
    padding: 0;
  }

  .custom__options {
    position: absolute;
    display: block;
    background-color: #005fec;
    top: 100%;
    left: 0;
    right: 0;
    border-top: 0;
    transition: all 0.5s;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 2;
  }
  .custom__options:before, .custom__options:after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 11px;
    border: 11px solid transparent;
    border-bottom-color: #005fec;
  }

  .custom__select-trigger,
.custom__option {
    letter-spacing: 1px;
    font-weight: 800;
    color: #005fec;
    border: 0;
    background: transparent;
  }

  .custom__select.open .custom__options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    color: #fff;
    width: 100%;
  }

  .custom__option {
    position: relative;
    display: block;
    padding: 0 22px 0 20px;
    font-weight: 300;
    color: #fff;
    cursor: pointer;
    transition: all 0.5s;
    font-size: 12px;
    line-height: 12px;
    margin: 1.5em 0;
  }
  .custom__option:hover {
    cursor: pointer;
  }
  .custom__option.selected {
    color: #ffffff;
  }
  .custom__option.selected::before {
    content: "•";
    margin-left: -12px;
    padding-right: 8px;
  }

  /* arrow */
  .arrow {
    position: relative;
    height: 10px;
    width: 10px;
    margin-left: 2em;
  }
  .arrow::before, .arrow::after {
    content: "";
    position: absolute;
    bottom: 0px;
    width: 0.1rem;
    height: 100%;
    transition: all 0.5s;
  }
  .arrow::before {
    left: -2px;
    transform: rotate(45deg);
    background-color: #394a6d;
  }
  .arrow::after {
    left: 2px;
    transform: rotate(-45deg);
    background-color: #394a6d;
  }

  .open .arrow::before {
    left: -2px;
    transform: rotate(-45deg);
  }
  .open .arrow::after {
    left: 2px;
    transform: rotate(45deg);
  }

  .arrow::after {
    left: 5px;
    transform: rotate(-45deg);
    background-color: #394a6d;
  }

  .open .arrow::before {
    left: -2px;
    transform: rotate(-45deg);
  }
  .open .arrow::after {
    left: 5px;
    transform: rotate(45deg);
  }
}
@media screen and (min-width: 768px) {
  .filter__settings {
    flex-direction: row;
  }

  .custom__select-trigger {
    justify-content: space-evenly;
    margin-right: auto;
  }

  .filter__settings .custom__select-wrapper {
    margin: 0 2em;
  }

  .custom__select-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .custom__select-wrapper:last-child {
    margin-left: auto;
  }
}