如何在叠加层中显示正确的电影信息？

Question

我正在寻找在我的叠加层中显示正确电影信息的解决方案。 我有一个“弹出窗口”，当我点击一部电影时会出现，它应该在其中显示电影的信息，但是当我点击一部电影时，无论它是哪一部电影，它只显示最后一部电影的信息，应该我要修复它吗？

const movieIntegration =() => {
    allMovies.map(movie=> {
        movieGallery.innerHTML += `<div class="imgContainer">
                                        <img src="${movie.img}" alt="${movie.name}">
                                                <div class="titleContainer">
                                                    <div class="movieTitle"> ${movie.name} </div>
                                                    <div class="seemore"> See more </div>
                                                </div>
                                    </div>`

        const seemore = document.querySelectorAll(".seemore")
        seemore.forEach(elm => {
            elm.addEventListener("click",() => {
                pageContainer.innerHTML += `<div class="popupContainer">
                                                <div class="popup">

                                                    ${movie.name}

                                                    <div id="likeButton">
                                                        <img src="img/like.png">
                                                    </div>

                                                    <div id="editButton">
                                                        <img src="img/edit.png">
                                                    </div>

                                                    <a href="submit.html">
                                                        <div id="addingButton">
                                                            <img src="img/add.png">
                                                        </div>
                                                    </a>
                                                </div>
                                            </div>`
                console.log(true)
            }, true)
        })
    })
    
}

Answer 1

问题是您获取了每部电影的所有 .seemore 元素，并且您正在编辑每部电影的所有元素的内容，因此最后一部电影将覆盖之前所有的内容。

解决方案可能是这样的：

const movieIntegration = () => {
  allMovies.map((movie) => {
    movieGallery.innerHTML += `<div class="imgContainer">
                                <img src="${movie.img}" alt="${movie.name}">
                                <div class="titleContainer">
                                  <div class="movieTitle"> ${movie.name} </div>
                                  <div class="seemore"> See more </div>
                                </div>
                              </div>`
  })
  const seemore = document.querySelectorAll('.seemore')
  seemore.forEach((elm, i) => {
    elm.addEventListener(
      'click',
      () => {
        pageContainer.innerHTML += `<div class="popupContainer">
                                      <div class="popup">
                                        ${allMovies[i].name}
                                        <div id="likeButton">
                                          <img src="img/like.png">
                                        </div>
                                        <div id="editButton">
                                          <img src="img/edit.png">
                                        </div>
                                        <a href="submit.html">
                                          <div id="addingButton">
                                            <img src="img/add.png">
                                          </div>
                                        </a>
                                      </div>
                                    </div>`
      },
      true
    )
  })
}

通过这种方式，您可以在完成allMovies 的映射之后映射.seemore 元素，并且对于每个.seemore 元素，您可以获得相关的电影并在其中写下他的名字。