jquery 我在onclick事件中使用了for循环，但没有触发最后一个元素

jslywgbw 于 2023-10-17 发布在 jQuery

关注(0)|答案(2)|浏览(100)

我使用for循环函数来单击所有元素，如
for(let i = 0; i < elements.length; i++)
然后我用elements[i].onclick () =>{...Code .. }
然后它完美地工作，但如果你点击元素的最后一部分，它不会触发。我想做的代码，如果用户点击缩略图或标题，链接或videoID将放在iFrame上。但我不会在这里包含iFrame，而是使用alert()函数
这是我的代码。

fetch('https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=25&playlistId=UUiNxeE13Z4zTZYG_0r3RStw&key=AIzaSyDL4P5BqSx4p-juYifPzaoNJ_8WAZSprc4')
  .then(res => res.json())
  .then(data => {
    JSON.stringify(data.items.forEach((el) => {
      var ChannelID = [el.snippet.resourceId.videoId];
      var Thumbnails = [el.snippet.thumbnails.medium.url];
      var Titles = [el.snippet.title];

      function createTags() {
        const Blogs = $('#Main');
        for (let i = 0; i < ChannelID.length; i++) {
          const Tags = `
                      <div class="Content">
                      <input value="">
                          <div class="Thumbnails">
                      <img src=""/>
                          </div>
                          <div class="Titles">
                      <p></p>
                          </div>      
                      </div>
                    `
          var VideoData = $(Tags);
          VideoData.find('input').attr("value", ChannelID[i]);
          VideoData.find('img').attr("src", Thumbnails[i]);
          VideoData.find('p').text(Titles[i]);
          Blogs.append(VideoData);
        }
      }
      var Cont = document.getElementsByClassName("Content")
      for (let i = 0; i < Cont.length; i++) {
        Cont[i].onclick = () => {
          let imageURL = Cont[i].querySelector("input").value;
          alert("You clicked this video that has a channel ID of:" + imageURL);
        }
      }
      createTags();
    }));
  });

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box
}

#Main {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-direction: column;
  margin-top: 10px;
  align-items: center;
}

.Content {
  width: 90%;
  background: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 10px;
  gap: 10px;
}

.Thumbnails {
  width: 100%;
  height: 161px;
  background: blue;
}

.Titles {
  width: 100%;
  height: 30%;
  background: red;
  overflow: hidden;
  padding: 8px;
}

img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

p {
  height: 20%;
  width: 100%;
  font-size: 16px;
  color: white;
  width: 100%;
  font-weight: bold;
  text-align: center;
}

input {
  position: absolute;
  width: 76%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Page title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src="./app.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
  <div id="Main">

  </div>
</body>

</html>

无论如何，我编码在我的移动终端，所以我建议你最小化你的笔记本电脑/台式机的屏幕，直到500像素。

jquery

来源：https://stackoverflow.com/questions/77306215/i-used-for-loop-in-onclick-event-but-doesnt-triggered-the-last-element

2条答案

按热度按时间

bqf10yzr1#

代码中有许多问题，其中之一是每次在forEach函数中重新创建模板。也不需要createTags函数。由于您使用的是jquery，因此可以简单地使用$('Content').click向其添加事件侦听器

const Blogs = $('#Main');
const Tags = `
                      <div class="Content">
                      <input value="">
                          <div class="Thumbnails">
                      <img src=""/>
                          </div>
                          <div class="Titles">
                      <p></p>
                          </div>      
                      </div>
                    `
fetch('https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=25&playlistId=UUiNxeE13Z4zTZYG_0r3RStw&key=AIzaSyDL4P5BqSx4p-juYifPzaoNJ_8WAZSprc4')
  .then(res => res.json())
  .then(data => {
    data.items.forEach((el) => {
      let ChannelID = [el.snippet.resourceId.videoId];
      let Thumbnails = [el.snippet.thumbnails.medium.url];
      let Titles = [el.snippet.title];
      let VideoData = $(Tags);
      VideoData.find('input').attr("value", ChannelID);
      VideoData.find('img').attr("src", Thumbnails);
      VideoData.find('p').text(Titles);
      Blogs.append(VideoData);
    });
    $('.Content').click(function(e) {
      let imageURL = e.target.value;
      alert("You clicked this video that has a channel ID of:" + imageURL);
    })
  });

* {
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box
}

#Main {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-direction: column;
  margin-top: 10px;
  align-items: center;
}

.Content {
  width: 90%;
  background: white;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 10px;
  gap: 10px;
}

.Thumbnails {
  width: 100%;
  height: 161px;
  background: blue;
}

.Titles {
  width: 100%;
  height: 30%;
  background: red;
  overflow: hidden;
  padding: 8px;
}

img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}

p {
  height: 20%;
  width: 100%;
  font-size: 16px;
  color: white;
  width: 100%;
  font-weight: bold;
  text-align: center;
}

input {
  position: absolute;
  width: 76%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="Main">

</div>

赞(0）回复(0）举报 2023-10-17

yjghlzjz2#

您应该移动循环以将click处理程序分配到data.items.forEach外部：

fetch('https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=25&playlistId=UUiNxeE13Z4zTZYG_0r3RStw&key=<secret>')
.then(res => res.json())
.then(data => {
    JSON.stringify(data.items.forEach((el) => {
    var ChannelID = [el.snippet.resourceId.videoId];
    var Thumbnails = [el.snippet.thumbnails.medium.url];
    var Titles = [el.snippet.title];

    function createTags() {
        const Blogs = $('#Main');
        for (let i = 0; i < ChannelID.length; i++) {
        const Tags = `
                    <div class="Content">
                    <input value="">
                        <div class="Thumbnails">
                    <img src=""/>
                        </div>
                        <div class="Titles">
                    <p></p>
                        </div>      
                    </div>
                    `
        var VideoData = $(Tags);
        VideoData.find('input').attr("value", ChannelID[i]);
        VideoData.find('img').attr("src", Thumbnails[i]);
        VideoData.find('p').text(Titles[i]);
        Blogs.append(VideoData);
        }
    }

    createTags();
    }));
    var Cont = document.getElementsByClassName("Content")
    for (let i = 0; i < Cont.length; i++) {
    Cont[i].onclick = () => {
        let imageURL = Cont[i].querySelector("input").value;
        alert("You clicked this video that has a channel ID of:" + imageURL);
    }
    }
});

注意：我将您的密钥替换为<secret>。

赞(0）回复(0）举报 2023-10-17

我来回答

jquery 我在onclick事件中使用了for循环，但没有触发最后一个元素

2条答案

相关问题

热门标签

最新问答