问如何在覆盖层中显示正确的电影信息？
EN

Stack Overflow用户

提问于 2021-12-05 21:46:18

回答 1查看 40关注 0票数 1

我正在寻找解决方案，以显示正确的电影信息，在我的覆盖。我有一个“弹出窗口”，当我点击一部电影，它应该显示电影的信息，但当我点击一部电影，无论是哪一部，它只显示最后的电影信息，我应该做什么来修复它？

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)
        })
    })
    
}

javascript

popup

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-05 21:52:43

问题是，您正在获取每个电影的所有.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
    )
  })
}

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70238829

复制

相似问题

问如何在覆盖层中显示正确的电影信息？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在覆盖层中显示正确的电影信息？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在覆盖层中显示正确的电影信息？
EN