如何使用JS处理html选择标记

Question

首先，我是JS的新手，并尝试用select标记制作一些列表。

具体地说，我想做一个函数，如果我选择"；2014"；在几个选项中，chart将只显示一个类名为"的div；2014"；否则将不显示。但不知怎么的，它并没有像我预期的那样起作用。有人能帮我解决这个问题吗？感谢

const yearsOption = document.querySelector(".select");
yearsOption.addEventListener("change", filterYear());
function filterYear(e) {
const years = yearsOption.childNodes;
years.forEach(function (year) {
switch (e.target.value) {
case "2014":
if (year.classList.contains("2014")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
case "2015":
if (year.classList.contains("2015")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
case "2016":
if (year.classList.contains("2016")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
case "2017":
if (year.classList.contains("2017")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
case "2018":
if (year.classList.contains("2018")) {
year.style.display = "flex";
} else {
year.style.display = "none";
}
break;
}
});
}

<div class="years_option">
year:
<select name="years" class="select">
<option value="2014" class="2014">2014</option>
<option value="2015" class="2015">2015</option>
<option value="2016" class="2016">2016</option>
<option value="2017" class="2017">2017</option>
<option value="2018" class="2018">2018</option>
</select>
</div>
<div class="table">
<div class="2014" data-include-path="/data/2014batters.htm">2014</div>
<div class="2015" data-include-path="/data/2015batters.htm">2015</div>
<div class="2016" data-include-path="/data/2016batters.htm">2016</div>
<div class="2017" data-include-path="/data/2017batters.htm">2017</div>
<div class="2018" data-include-path="/data/2018batters.htm">2018</div>
</div>

Answer 1

以下是您可能想要做的事情的简化版本：

const divs=[...document.querySelectorAll(".table div")],
sel=document.querySelector(".select");
sel.addEventListener("change",ev=>divs.forEach(d=>
d.classList.toggle("hidden",!d.classList.contains(ev.target.value))
));

.hidden {display:none}

<div class="years_option">
year:
<select name="years" class="select">
<option value="2014" class="2014">2014</option>
<option value="2015" class="2015">2015</option>
<option value="2016" class="2016">2016</option>
<option value="2017" class="2017">2017</option>
<option value="2018" class="2018">2018</option>
</select>
</div>
<div class="table">
<div class="2014" data-include-path="/data/2014batters.htm">2014</div>
<div class="2015 hidden" data-include-path="/data/2015batters.htm">2015</div>
<div class="2016 hidden" data-include-path="/data/2016batters.htm">2016</div>
<div class="2017 hidden" data-include-path="/data/2017batters.htm">2017</div>
<div class="2018 hidden" data-include-path="/data/2018batters.htm">2018</div>
</div>

Answer 2

这个JS应该可以工作，使用document.querySelectorAll((：

const yearsOption = document.querySelector(".select");
yearsOption.addEventListener("change", function(e) {
const year = e.target.value;
document.querySelectorAll('.table > div').forEach(function(item) {
item.style.display = (item.classList.contains(year) ? 'flex' : 'none');
})
});