Question

我正在建立一个电影评论网站，该网站的所有内容都是根据管理面板中输入的数据在首页上生成的，并放置在容器div中。

我已经有一个基本的分类系统（按ID，升序/降序），该分类系统可以正常工作，但我也希望能够按流派过滤影片（例如，如果影片被标记为“数据库上的动作” ，将所有非动作片都隐藏起来。

仅靠CSS无法做到这一点，因为我无法向容器内的内容添加类，胶片图像的容器是通过JS生成的。

我假设我需要创建一个新功能，例如

 function getFilmListByGenre(genreName)

或者类似的东西，但是我不知道如何使它起作用。

这是我当前拥有的Javascript，可创建排序功能。

      let db = new PouchDB('films');

  let radios = document.getElementsByName("sort");
  radios[0].addEventListener("change", getFilmList);
  radios[1].addEventListener("change", getFilmList);

  getFilmList();

  function getFilmList(){
    db.allDocs({include_docs: true, descending: radios[0].checked}).then(function(films){

      let listContents = '';


      for(let i = 0; i < films.total_rows; i++) {
        let thisFilm = films.rows[i].doc;
        let image = '<a class="btn" href="viewFilm.html?id=' + thisFilm._id +'"><img class="filmImage" src="' + thisFilm.image +'"></a>';


        listContents += '<div class="filmRow">'+ image + '</div>';
      }

      document.getElementById('filmContainer').innerHTML = listContents;

    })
  }

我基本上想从数据库中获取每部电影的流派值（只能是“动作”，“喜剧”，“恐怖”或“其他”），如果对应的广播（命名为筛选器），则所有未标记为该类型的电影都将被隐藏。

@import url(https://fonts.googleapis.com/css?family=Raleway);

body {
  margin: 0;
  font-family: 'Raleway', georgia, arial;
  background-color: #e0e0e0;
  text-align: center;
}

h1 {
  color: #aaaaaa;
  text-align: left;
}

.sortFilms {
  text-align: left;
  display: inline-block;
  background-color: #ff6699;
  width: 80%;
  padding: 20px;
}

header {
  text-align: center;
  display: inline-block;
  border-bottom: 5px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-style: solid;
  border-color: #aaaaaa;
  width: 80%;
  padding: 20px;
  background-color: #e0e0e0;
}

.newFilm {
  text-align: left;
  display: inline-block;
  background-color: #ff6699;
  width: 80%;
  padding: 20px;
}

label {
  font-size: 1em;
  padding: 6px;
  color: #fff;
  font-weight: 700;
  display: block;
  text-align: left;
}

.form {
  margin: auto;
  display: flex;
  text-align: center;
  flex-direction: column;
}

h2 {
  font-weight: 700;
  font-size: 2em;
  width: 50%;
  color: #B2365F;
}

#formTitle {
  margin-top: 0;
  margin-bottom: 0;
}

.row {
  margin-left: -20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.col {
  padding: 20px;
}

input,
textarea, select {
  width: 100%;
  display: block;
  border-radius: 25px;
  background-color: #e0e0e0;
  padding: 10px;
  border: none;
  box-sizing:border-box; }
}


.tagline {
  margin: 0;
  color: #333333;
  font-size: 1em;
  font-weight: 700;
}

input::placeholder {
  color: #000;
}

textarea::placeholder {
  color: #000;
}

#modifyFilmButton {
  float: right;
}

@media only screen and (max-width: 700px) {
  .row  {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width:800px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }

  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table tr {
    border: 2px solid #e0e0e0;
    background-color: #e0e0e0;
    display: block;
    margin-bottom: .625em;
    border-radius: 20px;
  }

  table td {
    display: block;
    font-weight: bold;
    font-size: 1.2em;
    text-align: left;
    padding: 15px;
  }

  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }

  table td:last-child {
    border-bottom: 0;
  }
}

.oldFilm {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    text-align: left;
    display: inline-block;
    background-color: #AAAAAA;
    width: 80%;
    padding: 20px;
}

#oldTitle {
  margin-top: 0;
  margin-bottom: 0;
  color: #ff6699;
  padding-bottom: 20px;
}

td {
  padding: 5px;
  font-weight: bold;
}

table {
  border-collapse: collapse;
  text-align: center;
  width: 100%;
}
thead {
  background: #ff6699;
}

.reviewImage {
  width: 200px;
  border-radius: 20px;
}
.filmRow img {
  width: 300px;
  height: 420px;
  margin: 10px;
  border-radius: 20px;
}

.filmRow {
 -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

#filmContainer {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

#date {
  padding: 5px;
  text-align: left;
  width: 30%;
}

#date input {
  width: auto;
}

#date label {
  display: -webkit-inline-box;
}

#oldTitle2 {
  margin-top: 0;
  margin-bottom: 0;
  color: #ff6699;
}

.genre {
  padding: 5px;
  text-align: left;
  width: 60%;
}

.genre input {
  width:auto;
}

.genre label {
  display: -webkit-inline-box;
}

    <div class="sortFilms">
    <h2 id="formTitle">Latest reviews</h2>
    <div id='filmContainer'></div>
  </div>
  <div class="oldFilm">
    <h2 id="oldTitle2">Sort by</h2>
      <div id="date">
      <p><b>Age of review</b></p>
      <label>Newer<input type="radio" name="sort" checked/></label>
      <label>Older<input type="radio" name="sort"/></label>
  </div>
  <div class="genre">
  <p><b>Genre</b></p>
  <label>Action<input type="radio" name="filter"/></label>
  <label>Comedy<input type="radio" name="filter"/></label>
  <label>Horror<input type="radio" name="filter"/></label>
  <label>Other<input type="radio" name="filter"/></label>

</div>
</div>

Answer 1

您应该将显示逻辑和获取逻辑分开，然后可以过滤出不是您想要的类型的结果。我会这样做：

var db = {
    allDocs: () => {
        return new Promise((resolve) => resolve([{genre: 'Horror', title: 'The Hills Have Eyes'}, {genre: 'Comedy', title: 'Dumb and Dumber'}]))
    }
}
function getFilmList() {
  return db.allDocs();
}

function getFilmsByGenre(genre) {
    return getFilmList().then(films => films.filter(film => film.genre === genre));
}

function displayFilms(films) {
  let listContents = '';
  for(let i = 0; i < films.length; i++) {
    let thisFilm = films[i].title;
    listContents += '<div class="filmRow">'+ thisFilm + '</div>';
  }
  document.getElementById('filmContainer').innerHTML = listContents;
}

document.getElementById('all').addEventListener('click', () => {
    getFilmList().then(displayFilms)
})

document.querySelectorAll('[name="filter"]').forEach(radio => radio.addEventListener('change', (event) => {
    getFilmsByGenre(event.target.parentNode.textContent).then(displayFilms)
}))

<div id="filmContainer"></div>

<button id="all">All</button>

<label>Action<input type="radio" name="filter"/></label>
<label>Comedy<input type="radio" name="filter"/></label>
<label>Horror<input type="radio" name="filter"/></label>
<label>Other<input type="radio" name="filter"/></label>

如何为使用Javascript显示的内容创建过滤器？

1 个答案: