無法加載隨機影像

我一直在嘗試從頂部陣列中以隨機順序顯示貓影像。我的 click4pics 不適用于顯示的代碼，我收到一條訊息，提示無法找到影像，但是當我更改影像源以僅加載一張影像時，該函式也可以使用此功能？

const cat$Images = [
  { name: "C1", img: "C1.jpg", },
  { name: "C2", img: "C2.jpg", }, 
  { name: "C3", img: "C3.jpg", }, 
  { name: "C4", img: "C4.jpg", },
]
    
let PicturePairs = [
  { name: "C1", img: "C1.jpg", 
    name: "C2", img: "C2.jpg", }, 
];
console.log(PicturePairs)
console.log(cat$Images)    
    
function shuffle(array) {
  let currentIndex = array.length,
      randomIndex;
      
  while(currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
      
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]
    ];
  }
}
      
shuffle(cat$Images)
shuffle(PicturePairs)
      
let clickImage = document.querySelector("#button")
clickImage.addEventListener("click",click4pics)

function click4pics(i) {
  let catpics=document.createElement("img")
  catpics.src=`images/${cat$Images[i].img}`;
  catpics.alt = cat$Images.src;
  document.querySelector("#box").appendChild(catpics);
  catpics.addEventListener("click", function(e) {
    console.log(e.target.src);
  })
}
    
click4pics(0)
click4pics(1)
click4pics(2)
click4pics(3)

uj5u.com熱心網友回復：

用作事件處理程式的任何函式的第一個引數是“事件”本身。所以，如果你在“click4pics”函式的開頭添加一個console.log(i)，然后嘗試點擊按鈕，你會發現他的“i”是事件物件。要解決這個問題，您可以使用回圈而不是傳遞引數。

function click4pics() {
  for (let i = 0; i < cat$Images.length; i  ) {
    let catpics = document.createElement("img")
    catpics.src = `images/${cat$Images[i].img}`;
    catpics.alt = cat$Images.src;
    document.querySelector("#box").appendChild(catpics);
    catpics.addEventListener("click", function (e) {
      console.log(e.target.src);
    })
  }
}

如果您打算在每次單擊按鈕時重新生成隨機影像，請將所有登錄資訊放入“click4pics”函式中。在重新生成影像元素之前，請確保先清空“#box”。

    function shuffle(array) {
      let currentIndex = array.length,
        randomIndex;

      while (currentIndex != 0) {

        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;

        [array[currentIndex], array[randomIndex]] = [
          array[randomIndex], array[currentIndex]
        ];
      }

    }

    let clickImage = document.querySelector("#button")
    clickImage.addEventListener("click", click4pics)

    function click4pics() {
      const cat$Images = [
        { name: "C1", img: "C1.jpg", },
        { name: "C2", img: "C2.jpg", },
        { name: "C3", img: "C3.jpg", },
        { name: "C4", img: "C4.jpg", },
      ]

      let PicturePairs = [
        {
          name: "C1", img: "C1.jpg",
          name: "C2", img: "C2.jpg",
        },
      ];

      shuffle(cat$Images)
      shuffle(PicturePairs)

      document.querySelector("#box").innerHTML = ''; // empty it each time

      for (let i = 0; i < cat$Images.length; i  ) {
        let catpics = document.createElement("img")
        catpics.src = `images/${cat$Images[i].img}`;
        catpics.alt = cat$Images.src;
        document.querySelector("#box").appendChild(catpics);
        catpics.addEventListener("click", function (e) {
          console.log(e.target.src);
        })
      }
    }

    click4pics()

<div id="box"></div>
<button id="button">btn</button>

如果您對影像的路徑有疑問，請確保您有一個與 Html 檔案處于同一級別的名為“影像”的檔案夾，并將影像放入其中。

標籤：javascript 数组 图片

上一篇：我可以將多個影像堆疊在一起并在它們之間切換嗎？HTML、CSS、Java腳本

下一篇：如何減少數百萬張圖片的檔案大小？