用下拉選單過濾VanillaJS

我正在嘗試使用下拉串列進行過濾，但我做錯了。似乎第一個“if 陳述句”是正確的，但即便如此，它仍在添加樣式以禁用 tbody。有什么線索嗎？提前致謝。

tbody = document.querySelectorAll("tbody");
dropdown = document.getElementById('filter_years');
function filterByYear(){
   dropdown_value = dropdown.value
    for (let i = 0; i < tbody.length; i  ) {
      years = tbody[i].getAttribute("data-year");
      if(dropdown_value == years[i]){
         tbody[i].classList.remove("cat_hide_year");
         } else if(dropdown_value == "2020-2022") {
            tbody[i].classList.remove("cat_hide_year");
         }
         else{
            tbody[i].classList.add("cat_hide_year");
         }
      }
}
dropdown.onchange = filterByYear;

td{
  border:1px solid black;
  padding:10px 20px;
}
#filter_dropdown{
  margin-bottom:20px;
}
.cat_hide_year{
  display:none;
}

<div id="filter_dropdown">
  <select id="filter_years">
    <option value="2020-2022">2020-2022</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
  </select>
</div>
<table>
  <tbody data-year="2022" class="">
    <tr><td>2022</td></tr>       
  </tbody>
  <tbody data-year="2021" class="">
    <tr><td>2021</td></tr>       
  </tbody>
  <tbody data-year="2020" class="">
    <tr><td>2020</td></tr>       
  </tbody>
</table>

uj5u.com熱心網友回復：

你有一個不屬于那里的，但實際上我認為你過于復雜了[i]。if(dropdown_value == years[i]){

注意我將第一個選項值更改為“全部”

const tbody = document.querySelectorAll("tbody");
document.getElementById('filter_years').addEventListener("change", function() {
  const dropdown_value = this.value;
  tbody.forEach(tb => tb.hidden = dropdown_value !== "all" && dropdown_value !== tb.dataset.year)
})

td {
  border: 1px solid black;
  padding: 10px 20px;
}

#filter_dropdown {
  margin-bottom: 20px;
}

<div id="filter_dropdown">
  <select id="filter_years">
    <option value="all">2020-2022</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
  </select>
</div>
<table>
  <tbody data-year="2022" class="">
    <tr>
      <td>2022</td>
    </tr>
  </tbody>
  <tbody data-year="2021" class="">
    <tr>
      <td>2021</td>
    </tr>
  </tbody>
  <tbody data-year="2020" class="">
    <tr>
      <td>2020</td>
    </tr>
  </tbody>
</table>

uj5u.com熱心網友回復：

只需洗掉 if 陳述句中的 [i]

// AS-IS
if(dropdown_value == years[i]){

// TO-BE
if(dropdown_value == years){

tbody = document.querySelectorAll("tbody");
dropdown = document.getElementById('filter_years');
function filterByYear(){
   dropdown_value = dropdown.value
    for (let i = 0; i < tbody.length; i  ) {
      years = tbody[i].getAttribute("data-year");
      if(dropdown_value == years){
         tbody[i].classList.remove("cat_hide_year");
         } else if(dropdown_value == "2020-2022") {
            tbody[i].classList.remove("cat_hide_year");
         }
         else{
            tbody[i].classList.add("cat_hide_year");
         }
      }
}
dropdown.onchange = filterByYear;

td{
  border:1px solid black;
  padding:10px 20px;
}
#filter_dropdown{
  margin-bottom:20px;
}
.cat_hide_year{
  display:none;
}

<div id="filter_dropdown">
  <select id="filter_years">
    <option value="2020-2022">2020-2022</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
  </select>
</div>
<table>
  <tbody data-year="2022" class="">
    <tr><td>2022</td></tr>       
  </tbody>
  <tbody data-year="2021" class="">
    <tr><td>2021</td></tr>       
  </tbody>
  <tbody data-year="2020" class="">
    <tr><td>2020</td></tr>       
  </tbody>
</table>

標籤：javascript 筛选 落下

上一篇：我將如何替換所有“？”在帶有隨機字母但使用的字母不能連續重復兩次的短語中？

下一篇：js決議sql并提取表名別名