Saya memiliki filter tarik-turun khusus (bukan filter pilih > opsi) dan saya mencoba mengurutkan menurut dua atribut data yang berbeda. Saya dapat mengurutkan berdasarkan Jenis Cerita, tetapi sepertinya saya tidak dapat membuat Tahun bekerja.

Selain itu, sepertinya saya tidak bisa mengaktifkan tombol reset.

//dropdown
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 span"
      ).textContent = this.textContent;
      storyFilter(this.dataset["value"]);
    }
  });
}

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 span"
      ).textContent = this.textContent;
      yearFilter(this.dataset["year"]);
    }
  });
}

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

// filter
function storyFilter(className) {
  const list = document.querySelectorAll(".list.article");

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

function yearFilter(className) {
  const list = document.querySelectorAll(".list.article");

  for (const article of list) {
    article.classList.add("hidden");
    if (article.getAttribute("data-year") === className) {
      article.classList.remove("hidden");
    }
  }
}

//reset button
let filterSelection = document.querySelector("#storyFilter");
filterSelection.addEventListener("change", function () {
  selectedFilter.classList.remove("hidden");
});

function clearSelection() {
  storyFilter.options[0].selected = "selected";
  yearFilter.options[0].selected = "selected";
  selectedFilter.classList.add("hidden");
  // reset articles
  [...document.querySelectorAll(".article")].forEach((article) =>
    article.classList.remove("hidden")
  );
}
@charset "UTF-8";
/* Roboto Font */
@import url("https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap");
*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

.hidden {
  display: none;
}

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



.wrapper {
  display: flex;
}

.custom__select {
  position: relative;
  display: flex;
  flex-direction: column;
}
.custom__select-wrapper {
  position: relative;
  user-select: none;
  width: 100%;
}
.custom__select-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  font-size: 20px;
  font-weight: 300;
  color: #3b3b3b;
  height: 60px;
  line-height: 60px;
  background: #ffffff;
  cursor: pointer;
}
.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__select.open .custom__options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  color: #fff;
}
.custom__option {
  position: relative;
  display: block;
  padding: 0 22px 0 28px;
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  line-height: 60px;
  cursor: pointer;
  transition: all 0.5s;
}
.custom__option:hover {
  cursor: pointer;
  background-color: #b2b2b2;
}
.custom__option.selected {
  color: #ffffff;
}
.custom__option.selected::before {
  content: "•";
  margin-left: -12px;
  padding-right: 8px;
}

/* arrow */
.arrow {
  position: relative;
  height: 15px;
  width: 15px;
}
.arrow::before, .arrow::after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 0.15rem;
  height: 100%;
  transition: all 0.5s;
}
.arrow::before {
  left: -5px;
  transform: rotate(45deg);
  background-color: #394a6d;
}
.arrow::after {
  left: 5px;
  transform: rotate(-45deg);
  background-color: #394a6d;
}
.open .arrow::before {
  left: -5px;
  transform: rotate(-45deg);
}
.open .arrow::after {
  left: 5px;
  transform: rotate(45deg);
}
.arrow::after {
  left: 5px;
  transform: rotate(-45deg);
  background-color: #394a6d;
}
.open .arrow::before {
  left: -5px;
  transform: rotate(-45deg);
}
.open .arrow::after {
  left: 5px;
  transform: rotate(45deg);
}
<div class="wrapper">
  <div class="custom__select-wrapper">
    <div class="custom__select">
      <div class="custom__select-trigger">
        <span>Story Type</span>
        <div class="arrow"></div>
      </div>
      <div class="custom__options" id="storyFilter">
        <span class="custom__option selected">All</span>
        <span class="custom__option" data-value="news">News and Media</span>
        <span class="custom__option" data-value="analysis">Analysis</span>
        <span class="custom__option" data-value="press">Press Releases</span>
      </div>
    </div>
  </div>

  <div class="custom__select-wrapper">
    <div class="custom__select">
      <div class="custom__select-trigger"><span>Year</span>
        <div class="arrow"></div>
      </div>
      <div class="custom__options" id="yearFilter">
        <span class="custom__option selected">All</span>
        <span class="custom__option" data-year="2020">2020</span>
        <span class="custom__option" data-year="2019">2019</span>
        <span class="custom__option" data-year="2020">2018</span>
        <span class="custom__option" data-year="2019">2017</span>
        <span class="custom__option" data-year="2020">2016</span>
      </div>
    </div>
  </div>
</div>

<!-- reset button -->
<button class="clear hidden" id="selectedFilter" onclick="clearSelection()">clear filters</button>

<!-- articles -->
<div class="list article" data-year="2020" data-story="news">
  <ul>
    <li><strong>Company:</strong> Company 1</li>
    <li><strong>Start Date:</strong> March 26, 2020</li>
    <li><strong>Title:</strong> <a href="#" target="_blank">Article Title</a></li>
    <li><strong>Type:</strong> news</li>
  </ul>
</div>

<div class="list article" data-year="2019" data-story="news">
  <ul>
    <li><strong>Company:</strong> Company 2</li>
    <li><strong>Start Date:</strong> November 17, 2019</li>
    <li><strong>Title:</strong> <a href="#" target="_blank">Article Title</a></li>
    <li><strong>Type:</strong> news</li>
  </ul>
</div>

<div class="list article" data-year="2017" data-story="analysis">
  <ul>
    <li><strong>Company:</strong> Company 3</li>
    <li><strong>Start Date:</strong> March 15, 2018</li>
    <li><strong>Title:</strong> <a href="#" target="_blank">Article Title</a></li>
    <li><strong>Type:</strong> analysis</li>
  </ul>
</div>

<div class="list article" data-year="2016" data-story="analysis">
  <ul>
    <li><strong>Company:</strong> Company 4</li>
    <li><strong>Start Date:</strong> January 3, 2017</li>
    <li><strong>Title:</strong> <a href="#" target="_blank">Article Title</a></li>
    <li><strong>Type:</strong> analysis</li>
  </ul>
</div>

<div class="list article" data-year="2014" data-story="press">
  <ul>
    <li><strong>Company:</strong> Company 5</li>
    <li><strong>Start Date:</strong> March 13, 2016</li>
    <li><strong>Title:</strong> <a href="#" target="_blank">Aritcle Title</a></li>
    <li><strong>Type:</strong> press</li>
  </ul>
</div>

<div class="list article" data-year="2013" data-story="press">
  <ul>
    <li><strong>Company:</strong> Company 6</li>
    <li><strong>Start Date:</strong> March 6, 2015</li>
    <li><strong>Title:</strong> <a href="#" target="_blank">Article Title</a></li>
    <li><strong>Type:</strong> press</li>
  </ul>
</div>
0
Millhorn 12 Mei 2021, 03:09

1 menjawab

Jawaban Terbaik

Saya menghapus pendengar acara custom__option lainnya karena tidak dapat meneruskan apa pun ketika saya mencatat nilainya. Tahun juga dilewati sebagai dataset["year"]. Saya menambahkan current_story dan current_year untuk memfilter keduanya saat yang lain dipilih. Dan data-year Anda kacau, saya pikir saya mendapatkan kesalahan.

Ini bukan implementasi terbaik tetapi ini membuat Anda maju jika Anda ingin mengubah beberapa.

//dropdown
var 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 span"
      ).textContent = this.textContent;
      if (this.getAttribute('data-year')) {
        current_year = this.dataset["year"];
        yearFilter(this.dataset["year"]);
      } else {
        current_story = this.dataset["value"];
        storyFilter(this.dataset["value"]);
      }

    }
  });
}

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

// filter
function storyFilter(className) {
  const list = document.querySelectorAll(".list.article");

  for (const article of list) {
    article.classList.add("hidden");
    if (article.getAttribute("data-story") === className) {
      if (current_year !== "" && article.getAttribute("data-year") === current_year) {
        article.classList.remove("hidden");
      } else if (current_year === "") {
        article.classList.remove("hidden");
      }
    }
  }
}

function yearFilter(className) {
  const list = document.querySelectorAll(".list.article");

  for (const article of list) {
    article.classList.add("hidden");
    if (article.getAttribute("data-year") == className) {
      if (current_story !== "" && article.getAttribute("data-story") === current_story) {
        article.classList.remove("hidden");
      } else if ((current_story === "")) {
        article.classList.remove("hidden");
      }
    }
  }
}

//reset button
let filterSelection = document.querySelector("#storyFilter");

filterSelection.addEventListener("change", function() {
  selectedFilter.classList.remove("hidden");
});

function clearSelection() {
  storyFilter.options[0].selected = "selected";
  yearFilter.options[0].selected = "selected";
  selectedFilter.classList.add("hidden");
  // reset articles
  [...document.querySelectorAll(".article")].forEach((article) =>
    article.classList.remove("hidden")
  );
}
@charset "UTF-8";

/* Roboto Font */

@import url("https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&display=swap");
*,
*:after,
*:before {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

.hidden {
  display: none;
}

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

.wrapper {
  display: flex;
}

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

.custom__select-wrapper {
  position: relative;
  user-select: none;
  width: 100%;
}

.custom__select-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  font-size: 20px;
  font-weight: 300;
  color: #3b3b3b;
  height: 60px;
  line-height: 60px;
  background: #ffffff;
  cursor: pointer;
}

.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__select.open .custom__options {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  color: #fff;
}

.custom__option {
  position: relative;
  display: block;
  padding: 0 22px 0 28px;
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  line-height: 60px;
  cursor: pointer;
  transition: all 0.5s;
}

.custom__option:hover {
  cursor: pointer;
  background-color: #b2b2b2;
}

.custom__option.selected {
  color: #ffffff;
}

.custom__option.selected::before {
  content: "•";
  margin-left: -12px;
  padding-right: 8px;
}


/* arrow */

.arrow {
  position: relative;
  height: 15px;
  width: 15px;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  bottom: 0px;
  width: 0.15rem;
  height: 100%;
  transition: all 0.5s;
}

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

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

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

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

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

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

.open .arrow::after {
  left: 5px;
  transform: rotate(45deg);
}
<div class="wrapper">
  <div class="custom__select-wrapper">
    <div class="custom__select">
      <div class="custom__select-trigger">
        <span>Story Type</span>
        <div class="arrow"></div>
      </div>
      <div class="custom__options" id="storyFilter">
        <span class="custom__option selected">All</span>
        <span class="custom__option" data-value="news">News and Media</span>
        <span class="custom__option" data-value="analysis">Analysis</span>
        <span class="custom__option" data-value="press">Press Releases</span>
      </div>
    </div>
  </div>

  <div class="custom__select-wrapper">
    <div class="custom__select">
      <div class="custom__select-trigger"><span>Year</span>
        <div class="arrow"></div>
      </div>
      <div class="custom__options" id="yearFilter">
        <span class="custom__option selected">All</span>
        <span class="custom__option" data-year="2020">2020</span>
        <span class="custom__option" data-year="2019">2019</span>
        <span class="custom__option" data-year="2018">2018</span>
        <span class="custom__option" data-year="2017">2017</span>
        <span class="custom__option" data-year="2016">2016</span>
      </div>
    </div>
  </div>
</div>

<!-- reset button -->
<button class="clear hidden" id="selectedFilter" onclick="clearSelection()">clear filters</button>

<!-- articles -->
<div class="list article" data-year="2020" data-story="news">
  <ul>
    <li><strong>Company:</strong> Company 1</li>
    <li><strong>Start Date:</strong> March 26, 2020</li>
    <li><strong>Title:</strong> <a href="#" target="_blank">Article Title</a></li>
    <li><strong>Type:</strong> news</li>
  </ul>
</div>

<div class="list article" data-year="2019" data-story="news">
  <ul>
    <li><strong>Company:</strong> Company 2</li>
    <li><strong>Start Date:</strong> November 17, 2019</li>
    <li><strong>Title:</strong> <a href="#" target="_blank">Article Title</a></li>
    <li><strong>Type:</strong> news</li>
  </ul>
</div>

<div class="list article" data-year="2018" data-story="analysis">
  <ul>
    <li><strong>Company:</strong> Company 3</li>
    <li><strong>Start Date:</strong> March 15, 2018</li>
    <li><strong>Title:</strong> <a href="#" target="_blank">Article Title</a></li>
    <li><strong>Type:</strong> analysis</li>
  </ul>
</div>

<div class="list article" data-year="2017" data-story="analysis">
  <ul>
    <li><strong>Company:</strong> Company 4</li>
    <li><strong>Start Date:</strong> January 3, 2017</li>
    <li><strong>Title:</strong> <a href="#" target="_blank">Article Title</a></li>
    <li><strong>Type:</strong> analysis</li>
  </ul>
</div>

<div class="list article" data-year="2016" data-story="press">
  <ul>
    <li><strong>Company:</strong> Company 5</li>
    <li><strong>Start Date:</strong> March 13, 2016</li>
    <li><strong>Title:</strong> <a href="#" target="_blank">Aritcle Title</a></li>
    <li><strong>Type:</strong> press</li>
  </ul>
</div>

<div class="list article" data-year="2015" data-story="press">
  <ul>
    <li><strong>Company:</strong> Company 6</li>
    <li><strong>Start Date:</strong> March 6, 2015</li>
    <li><strong>Title:</strong> <a href="#" target="_blank">Article Title</a></li>
    <li><strong>Type:</strong> press</li>
  </ul>
</div>
1
Prosy Arceno 12 Mei 2021, 02:08