如何避免在JavaScript中重复多个链接

Question

我想做到这一点，以便当您按页面上的视频链接时，它将更改iframe视频的来源。

这就是现在有效的方法：

// Video links

 const videoLinks = {
  m1: "https://www.youtube-nocookie.com/embed/myvideo",
  m2: "https://www.youtube-nocookie.com/embed/myvideo",
  m3: "https://www.youtube-nocookie.com/embed/myvideo",
  m4: "https://www.youtube-nocookie.com/embed/myvideo",
  m5: "https://www.youtube-nocookie.com/embed/myvideo",
  m6: "https://www.youtube-nocookie.com/embed/myvideo",
  m7: "https://www.youtube-nocookie.com/embed/myvideo",
  m8: "https://www.youtube-nocookie.com/embed/myvideo",
  m9: "https://www.youtube-nocookie.com/embed/myvideo",
  m10: "https://www.youtube-nocookie.com/embed/myvideo",
  m11: "https://www.youtube-nocookie.com/embed/myvideo",
  m12: "https://www.youtube-nocookie.com/embed/myvideo",
  m13: "https://www.youtube-nocookie.com/embed/myvideo",
  m14: "https://www.youtube-nocookie.com/embed/myvideo",
  m15: "https://www.youtube-nocookie.com/embed/myvideo",
  m16: "https://www.youtube-nocookie.com/embed/myvideo",
  m17: "https://www.youtube-nocookie.com/embed/myvideo",
  m18: "https://www.youtube-nocookie.com/embed/myvideo",
  m19: "https://www.youtube-nocookie.com/embed/myvideo",
};

// Music playlist links

document.getElementById("m1").addEventListener("click", function () {
  musicVideo.src = videoLinks.m1;
});

document.getElementById("m2").addEventListener("click", function () {
  musicVideo.src = videoLinks.m2;
});

document.getElementById("m3").addEventListener("click", function () {
  musicVideo.src = videoLinks.m3;
});

document.getElementById("m4").addEventListener("click", function () {
  musicVideo.src = videoLinks.m4;
});

document.getElementById("m5").addEventListener("click", function () {
  musicVideo.src = videoLinks.m5;
});

document.getElementById("m6").addEventListener("click", function () {
  musicVideo.src = videoLinks.m6;
});

document.getElementById("m7").addEventListener("click", function () {
  musicVideo.src = videoLinks.m7;
});

document.getElementById("m8").addEventListener("click", function () {
  musicVideo.src = videoLinks.m8;
});

document.getElementById("m9").addEventListener("click", function () {
  musicVideo.src = videoLinks.m9;
});

document.getElementById("m10").addEventListener("click", function () {
  musicVideo.src = videoLinks.m10;
});

document.getElementById("m11").addEventListener("click", function () {
  musicVideo.src = videoLinks.m11;
});

document.getElementById("m12").addEventListener("click", function () {
  musicVideo.src = videoLinks.m12;
});

document.getElementById("m13").addEventListener("click", function () {
  musicVideo.src = videoLinks.m13;
});

document.getElementById("m14").addEventListener("click", function () {
  musicVideo.src = videoLinks.m14;
});

document.getElementById("m15").addEventListener("click", function () {
  musicVideo.src = videoLinks.m15;
});

document.getElementById("m16").addEventListener("click", function () {
  musicVideo.src = videoLinks.m16;
});

document.getElementById("m17").addEventListener("click", function () {
  musicVideo.src = videoLinks.m17;
});

document.getElementById("m18").addEventListener("click", function () {
  musicVideo.src = videoLinks.m18;
});

document.getElementById("m19").addEventListener("click", function () {
  musicVideo.src = videoLinks.m19;
});

但是它很长，我知道它可能会更短，我尝试制作循环，但我无法弄清楚如何键入它的逻辑，任何建议都会受到赞赏。

Answer 1

您可以使用这样的foreach循环。

const videoLinks = {
    m1: "https://www.youtube-nocookie.com/embed/myvideo",
    m2: "https://www.youtube-nocookie.com/embed/myvideo",
    m3: "https://www.youtube-nocookie.com/embed/myvideo",
    m4: "https://www.youtube-nocookie.com/embed/myvideo",
    m5: "https://www.youtube-nocookie.com/embed/myvideo",
    m6: "https://www.youtube-nocookie.com/embed/myvideo",
    m7: "https://www.youtube-nocookie.com/embed/myvideo",
    m8: "https://www.youtube-nocookie.com/embed/myvideo",
    m9: "https://www.youtube-nocookie.com/embed/myvideo",
    m10: "https://www.youtube-nocookie.com/embed/myvideo",
    m11: "https://www.youtube-nocookie.com/embed/myvideo",
    m12: "https://www.youtube-nocookie.com/embed/myvideo",
    m13: "https://www.youtube-nocookie.com/embed/myvideo",
    m14: "https://www.youtube-nocookie.com/embed/myvideo",
    m15: "https://www.youtube-nocookie.com/embed/myvideo",
    m16: "https://www.youtube-nocookie.com/embed/myvideo",
    m17: "https://www.youtube-nocookie.com/embed/myvideo",
    m18: "https://www.youtube-nocookie.com/embed/myvideo",
    m19: "https://www.youtube-nocookie.com/embed/myvideo",
  };

  Object.keys(videoLinks).forEach(key=>{
    document.getElementById(key).addEventListener("click", function () {
        musicVideo.src = videoLinks[key];
      });
  })

Answer 2

您应该使用数组来进行这种显然重复的觉得事物 - 还有一个基本前缀，即嵌入URL的外观，您只需要在视频认同部分（您排除在示例之外）上即可。只要您以0启动按钮ID-与数组中的索引相同 - 您就不太可能混淆哪个部分属于哪个。.它们可能也应该是由基于同一数组的循环生成的 - 所以对您的一组视频的任何更改都会立即转化为更多按钮。

const videoPrefix = 'https://www.youtube-nocookie.com/embed/';
const videoLinks = [ 'video-part-of-URL-for-index-0-number-1', 'vid-url-1-2', … ]; // the identifying part of the embed URL
const musicVideo = document.querySelector('#the-ID-of-the-player-element'); // fix this selector
for(let index = 0; index < 19; index++) // human [1 – 19], computer [0 - 18]
{
  document.querySelector("#m" + index).addEventListener("click", () => { musicVideo.src = videoPrefix + videoLinks[index]; } );
}