我有一个自定义的下拉筛选器(而不是select>选项筛选器(，我正试图按两个不同的数据属性进行排序。我可以按故事类型进行排序，但似乎无法让年份工作。
此外，我似乎无法让重置按钮工作。
//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>我删除了另一个custom__option事件侦听器，因为它在我记录值时无法传递任何信息。该年也被称为dataset["year"]。我添加了一个current_story和current_year，以在选择另一个时过滤这两个。你的data-year搞砸了，我以为我弄错了。
这不是最好的实现，但如果你想更改一些，它会让你继续前进。
//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>