css For循环只给出数组的最后一个值，append给出数组的所有值

我试图使一个搜索电影的应用程序，当我在输入框中输入的值，它给我所有的容器包含标题，图像和率。现在我试图给标题的API数组的值，当我点击按钮搜索电影。
我被卡住了，因为当我循环数组时，它只给我最后一个值，而当我试图追加时，它给我所有的值。

const moviesCtn = document.querySelectorAll('.jsMovieFlex');
const input = document.querySelector('#inpText');
const button = document.querySelector('#btn');

button.addEventListener('click', () => {
  const inpValue = input.value;
  moviesCtn.forEach(ctn => {
    ctn.style.display = 'flex';
  })
  searchMovie(`https://api.tvmaze.com/search/shows?q=${inpValue}`);
})

const searchMovie = async(url) => {
  const moviesImage = document.querySelectorAll('.jsMovieImage');
  const titles = document.querySelectorAll('.title-movie');
  const rates = document.querySelectorAll('h3');
  const req = await fetch(url);
  const data = await req.json();
  console.log(data);
  const arrayNames = data.map(names => names.show.name);
  console.log(arrayNames);
  for (let i = 0; i < arrayNames.length; i++) {
    const names = arrayNames[i];
    console.log(names);
    titles.forEach(title => {
      title.append(names);
    })
  }

}

body {
  width: 100%;
  height: 100%;
  background: #151c3f;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
  overflow-x: hidden;
}

.main {
  position: relative;
  width: 100%;
  height: 500px;
  background: url(avengers-endgame-locandina-Sentieri.jpg);
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  transform: translate(-0.6%, -2%);
}

.main h1 {
  color: #fff;
  position: absolute;
  width: 100%;
  text-align: center;
  font-size: 5rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 300;
  letter-spacing: 1px;
  z-index: 1;
}

.main>input {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-60%, -50%);
  padding: 20px;
  font-size: 22px;
  outline: none;
  border: none;
  border-radius: 10px;
  box-shadow: 20px 20px 5px #00000096;
}

.main>button {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-80%, 200%);
  font-size: 18px;
  padding: 10px;
  letter-spacing: 1px;
  border-radius: 7px;
  outline: none;
  border: none;
  cursor: pointer;
}

.main::after {
  position: absolute;
  content: "";
  inset: 0;
  background: #0000006e;
}

.movie-container {
  position: relative;
  width: 400px;
  height: 300px;
  background: #fff;
  display: none;
  justify-content: center;
  align-items: center;
}

.movie-container>h1 {
  position: absolute;
  width: 100%;
  transform: translateY(-30%);
  align-self: flex-start;
  text-align: center;
}

.movie-container>h3 {
  font-size: 20px;
  position: absolute;
  bottom: -2%;
}

.movie-container>.movie-image {
  width: 70%;
  height: 70%;
  background: darkred;
}

<div class="main">
  <h1>Search Movie App</h1>
  <input type="text" id="inpText" placeholder="Search Movie">
  <button id="btn">Click Here</button>
</div>

<div class="movie-container jsMovieFlex">
  <h1 class="title-movie"></h1>
  <div class="movie-image jsMovieImage"></div>
  <h3>rate</h3>
</div>
<div class="movie-container jsMovieFlex">
  <h1 class="title-movie"></h1>
  <div class="movie-image jsMovieImage"></div>
  <h3>rate</h3>
</div>
<div class="movie-container jsMovieFlex">
  <h1 class="title-movie"></h1>
  <div class="movie-image jsMovieImage"></div>
  <h3>rate</h3>
</div>
<div class="movie-container jsMovieFlex">
  <h1 class="title-movie"></h1>
  <div class="movie-image jsMovieImage"></div>
  <h3>rate</h3>
</div>
<div class="movie-container jsMovieFlex">
  <h1 class="title-movie"></h1>
  <div class="movie-image jsMovieImage"></div>
  <h3>rate</h3>
</div>
<div class="movie-container jsMovieFlex">
  <h1 class="title-movie"></h1>
  <div class="movie-image jsMovieImage"></div>
  <h3>rate</h3>
</div>
<div class="movie-container jsMovieFlex">
  <h1 class="title-movie"></h1>
  <div class="movie-image jsMovieImage"></div>
  <h3>rate</h3>
</div>
<div class="movie-container jsMovieFlex">
  <h1 class="title-movie"></h1>
  <div class="movie-image jsMovieImage"></div>
  <h3>rate</h3>
</div>
<div class="movie-container jsMovieFlex">
  <h1 class="title-movie"></h1>
  <div class="movie-image jsMovieImage"></div>
  <h3>rate</h3>
</div>
<div class="movie-container jsMovieFlex">
  <h1 class="title-movie"></h1>
  <div class="movie-image jsMovieImage"></div>
  <h3>rate</h3>
</div>

问题出在你的for中，你遍历了名字并将其分配给所有标题，这意味着姓氏将出现在所有标题上：

for (let i = 0; i < arrayNames.length; i++) {
    const name = arrayNames[i];
    titles.forEach(title => {
      title.append(name); // <------- each title gets current name
    })
  }

但是你只想把它分配给索引i处的标题：

for (let i = 0; i < arrayNames.length; i++) {
    const name = arrayNames[i];
    titles[i].append(name)
  }

我的猜测是你对命名感到困惑（我确实如此），因为它是非常明显的。使用更多的声明性变量名可能会有所帮助，特别是那些独特的变量名（即避免使用彼此相邻的同义词，如“title”和“name”）：

for (let i = 0; i < movieNames.length; i++) {
    const movieName = movieNames[i];
    titleTags[i].append(movieName)
  }

css For循环只给出数组的最后一个值，append给出数组的所有值

1条答案

相关问题

热门标签

最新问答