如何 select 顯示特定數量的過濾項目？

Question

我能夠在列表中顯示所有項目，並且可以使用“加載更多”按鈕添加其他項目。 但是，如果我 select 下拉列表和故事類型之一，我會得到所有這些。

如何只顯示 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

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添加到按鈕並調用function。 您可以刪除代碼中用於添加項目的其他部分。

Answer 2

這應該適合你...

只需創建一個全局變量filter ，並在調用storyFilter時設置它...使用此變量在loadMore function 上的切片之前進行過濾。

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

 <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>