喜欢计数按钮 + 卡片布局无法正常工作

如何解决喜欢计数按钮 + 卡片布局无法正常工作

enter image description here

我应该在大屏幕上放三张卡片，2 张在平板电脑上，1 张在移动设备上，并且都没有硬编码的 html。只能通过javascript。但是，当我尝试在同一行中添加三张卡片时，它会为整行拍摄相同的电影，然后为第二行拍摄下一部，依此类推。 此外，该按钮仅适用于第一张卡... 我的循环中一定有问题..

这是我目前的代码：

var parsedMovies = JSON.parse(movies);

for (let i = 0; i < parsedMovies.length; i++) {
  document.getElementById("cards").innerHTML += `
    
    <div class="card-group">
     <div class="card mb-3 bg-dark text-light" style="max-width: 540px;">
       <div class="row g-0 ">
         <div class="col-md-4 ">
           <img src="${parsedMovies[i].image}" class="img-fluid rounded-start" alt="...">
         </div>
         <div class="col-md-8">
           <div class="card-body">
             <h5 class="card-title">${parsedMovies[i].title}</h5>
             <p class="card-text">${parsedMovies[i].plot}</p>
             <p class="card-text"><small class="text-muted"> Year: ${parsedMovies[i].year} <br> Director: ${parsedMovies[i].director} <br> Actors: ${parsedMovies[i].actors}</small>
           
        <div class="voting">
            <button id="likebtn">
                <i>?</i>
            </button>
            <input type="number" id="input1" value="${parsedMovies[i].likes}">
            <button id="dislikebtn">
                <i>?</i>
            </button>
            <input type="number" id="input2" value="${parsedMovies[i].dislikes}">
        </div>
             </p>

           </div>
         </div>
       </div>
       
     </div>
     <div class="card mb-3 bg-dark text-light" style="max-width: 540px;">
       <div class="row g-0 ">
         <div class="col-md-4 ">
           <img src="${parsedMovies[i].image}" class="img-fluid rounded-start" alt="...">
         </div>
         <div class="col-md-8">
           <div class="card-body">
             <h5 class="card-title">${parsedMovies[i].title}</h5>
             <p class="card-text">${parsedMovies[i].plot}</p>
             <p class="card-text"><small class="text-muted"> Year: ${parsedMovies[i].year} <br> Director: ${parsedMovies[i].director} <br> Actors: ${parsedMovies[i].actors}</small>
           
        <div class="voting">
            <button id="likebtn">
                <i>?</i>
            </button>
            <input type="number" id="input1" value="${parsedMovies[i].likes}">
            <button id="dislikebtn">
                <i>?</i>
            </button>
            <input type="number" id="input2" value="${parsedMovies[i].dislikes}">
        </div>
             </p>

           </div>
         </div>
       </div>
       
     </div>
     <div class="card mb-3 bg-dark text-light" style="max-width: 540px;">
       <div class="row g-0 ">
         <div class="col-md-4 ">
           <img src="${parsedMovies[i].image}" class="img-fluid rounded-start" alt="...">
         </div>
         <div class="col-md-8">
           <div class="card-body">
             <h5 class="card-title">${parsedMovies[i].title}</h5>
             <p class="card-text">${parsedMovies[i].plot}</p>
             <p class="card-text"><small class="text-muted"> Year: ${parsedMovies[i].year} <br> Director: ${parsedMovies[i].director} <br> Actors: ${parsedMovies[i].actors}</small>
           
        <div class="voting">
            <button id="likebtn">
                <i>?</i>
            </button>
            <input type="number" id="input1" value="${parsedMovies[i].likes}">
            <button id="dislikebtn">
                <i>?</i>
            </button>
            <input type="number" id="input2" value="${parsedMovies[i].dislikes}">
        </div>
             </p>

           </div>
         </div>
       </div>
       
     </div>

    </div>
    `;

  let likebtn = document.querySelector("#likebtn");
  let dislikebtn = document.querySelector("#dislikebtn");
  let input1 = document.querySelector("#input1");
  let input2 = document.querySelector("#input2");

  likebtn.addEventListener("click",() => {
    input1.value = parseInt(input1.value) + 1;
  });

  dislikebtn.addEventListener("click",() => {
    input2.value = parseInt(input2.value) + 1;
  });

解决方法

您的循环多次创建相同的 ID... id 必须是唯一的。

因此，删除 HTML“模板”中的所有 id 并在 like 和 dislike 上使用一个类（我在下面使用了 like-action） em> 按钮。

然后，为这些按钮设置一个事件处理程序，因为操作是相同的（加一）。见下文：

let likebtns = document.querySelectorAll(".like-action");

likebtns.forEach((button)=>{
  button.addEventListener("click",(element) => {
    input = element.nextElementSibling
    input.value = parseInt(input.value) + 1;
  });
});

看看nextElementSibling。