试图过滤掉元素Javascript

Question

我试图根据下面下拉菜单中的选择来过滤某些影片。

<select id="filmDropdown">
        <option value="0">All Films</option>
        <option value="1">Film 1</option>
        <option value="2">Film 2</option>
        <option value="3">Film 3</option>
    </select>

    <select id="dateDropdown">
        <option value="All">All Dates</option>
        <option value="Mon">Mon</option>
        <option value="Tues">Tues</option>
        <option value="Wed">Wed</option>
        <option value="Thurs">Thurs</option>
        <option value="Fri">Fri</option>
        <option value="Sat">Sat</option>
        <option value="Sun">Sun</option>
    </select>

 <input type="button" value="Search" onclick="getSelectedValues()" />

这里是要选择的影片的html。

    <div id="allFilms">

        <div id="1" class="filmTag">
            Film 1
            <p>
                Mon
            </p>
            <ul>
                <li>12:00</li>
                <li>16:00</li>
            </ul>
            <p>
                Wed
            </p>
            <ul>
                <li>19:00</li>
            </ul>
        </div>

        <div id="2" class="filmTag">
            Film 2

            <p>
                Tues
            </p>
            <ul>
                <li>12:00</li>
                <li>16:00</li>
                <li>18:00</li>
            </ul>
        </div>

        <div id="3" class="filmTag">
            Film 3

            <p>
                Wed
            </p>
            <ul>
                <li>12:00</li>
                <li>16:00</li>
            </ul>
        </div>

    </div>

我试图使用Javascript来隐藏除所选影片以外的所有影片。这是我正在做的，但它似乎并没有选择所选的电影，而只是隐藏了一切。

<script>
        function getSelectedValues() {

            var f = document.getElementById("filmDropdown");
            var selectedFilm = f.value;

            if (selectedFilm !== 0) {

                var filmClass = document.getElementsByClassName("filmTag");

                for (var i = 0; i < filmClass.length; i++) {

                    if (filmClass.id === selectedFilm) {
                        filmClass[i].style.display = "block";
                    }
                    else {
                        filmClass[i].style.display = "none";
                    }
                }
            }
        }
    </script>

Answer 1

如果你正在开发你自己的应用程序，你可能想基于一个结构来渲染html，比如说像React那样。所以你有一个状态，在那里你也可以表示你的过滤器。使用选择器的另一种方式是不方便的，而且非常混乱，你可能会招致竞赛条件，这是不值得的。

如果你在一个你没有开发的页面中以外部脚本的形式来做，比如油猴脚本，那就另当别论了。但如果你能控制你的页面是如何呈现的，你可能要改变你的方法。

Answer 2

对于一个快速而肮脏的修复，这一行。

                    if (filmClass.id === selectedFilm) {

需要被。

                    if (filmClass[i].id === selectedFilm) {

Answer 3

一般来说 不是个好主意 使用内联事件处理程序

这里有一个替代方案，使用 活动代表团 css选择器 和 数据属性 来筛选元素。放下按钮，应用了一个 change 处理程序和简化的html。

document.addEventListener("change", showSelected);

function showSelected(evt) {
  if (/dropdown/i.test(evt.target.id)) {
    const selectValues = {
      films: document.querySelector("#filmDropdown").value,
      weekday: document.querySelector("#dateDropdown").value
    };

    // (re)show all initially
    document.querySelectorAll("[data-films], [data-weekday]")
      .forEach(elem => elem.classList.remove("hide"));

    // nothing to do (selected all/all)
    if (selectValues.films < 1 && selectValues.weekday === "All") {
      return true
    }

    // css queryselectors based on values
    // i.e. all elements *not* in current selection
    const films = selectValues.films !== "0"  ?
      `[data-films]:not([data-films='Film ${selectValues.films}'])` : '';
    const weekdays = selectValues.weekday !== "All" ?
      `${films ? `, ` : ''}[data-weekday]:not([data-weekday='${
           selectValues.weekday}'])` : '';
    
    //hide all not selected elements
    document.querySelectorAll(`${films}${weekdays}`)
      .forEach(elem => elem.classList.add("hide"));
  }
}

body {
  font: normal 12px/15px verdana, arial;
  margin: 2rem;
}

.hide {
  display: none;
}

ul[data-films] {
  margin-left: -1rem;
}

li[data-weekday]:before {
  content: attr(data-weekday)' ';
}

ul[data-films]:before {
  content: attr(data-films);
  position: relative;
  background-color: green;
  color: white;
  padding: 1px 3px;
  margin-left: -1rem;
  margin-bottom: 1rem;
  bottom: 4px;
  font-weight: bold;
}

<select id="filmDropdown">
  <option value="0">All Films</option>
  <option value="1">Film 1</option>
  <option value="2">Film 2</option>
  <option value="3">Film 3</option>
</select>

<select id="dateDropdown">
  <option value="All">All Days</option>
  <option value="Mon">Monday</option>
  <option value="Tues">Tuesday</option>
  <option value="Wed">Wednesday</option>
  <option value="Thurs">Thursday</option>
  <option value="Fri">Friday</option>
  <option value="Sat">Saturday</option>
  <option value="Sun">Sunday</option>
</select>

<ul data-films="Film 1">
  <li data-weekday="Sun">14:00</li>
  <li data-weekday="Sun">16:00</li>
  <li data-weekday="Sun">20:00</li>
  <li data-weekday="Mon">16:00</li>
  <li data-weekday="Mon">12:00</li>
  <li data-weekday="Mon">16:00</li>
</ul>

<ul data-films="Film 2">
  <li data-weekday="Tues">12:00</li>
  <li data-weekday="Tues">16:00</li>
  <li data-weekday="Wed">12:00</li>
  <li data-weekday="Wed">16:00</li>
  <li data-weekday="Sun">18:00</li>
  <li data-weekday="Sun">20:00</li>
</ul>

<ul data-films="Film 3">
  <li data-weekday="Tues">10:00</li>
  <li data-weekday="Tues">14:00</li>
  <li data-weekday="Wed">12:00</li>
  <li data-weekday="Wed">16:00</li>
  <li data-weekday="Fri">12:00</li>
  <li data-weekday="Fri">16:00</li>
  <li data-weekday="Sat">10:00</li>
  <li data-weekday="Sat">16:00</li>
  <li data-weekday="Sat">17:00</li>
</ul>