如何避免多個鏈接在Javascript中的重復

我想這樣做，以便當您按下頁面上的視頻鏈接時，它會更改 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;
});

但它超長，我知道它可以更短，我嘗試制作一個 for 回圈，但我無法弄清楚如何輸入它的邏輯，任何建議都值得贊賞。

uj5u.com熱心網友回復：

您可以像這樣使用 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];
      });
  })

uj5u.com熱心網友回復：

您應該將陣列用于明顯重復的可迭代事物 - 還有一個嵌入 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]; } );
}

標籤：javascript

上一篇：如何從物件逗號分隔的陣列中獲取值

下一篇：LocalStorage不斷更改我的密鑰對而不是推送到陣列