如何让每个img元素加载不同的API返回图片？渲染函数问题排查

我尝试给页面里的每个img元素加载不同的图片，但现在所有img都显示同一张，问题出在render函数里。相关代码如下：

HTML代码 #

<table class="imagesContainer">
  <tr>
    <td><img class="gif" src=""></td>
    <td><img class="gif" src=""></td>
    <td><img class="gif" src=""></td>
    <td><img class="gif" src=""></td>
  </tr>
  <tr>
    <td><img class="gif" src=""></td>
    <td><img class="gif" src=""></td>
    <td><img class="gif" src=""></td>
    <td><img class="gif" src=""></td>
  </tr>
</table>

JavaScript代码 #

function getGiphy(evt) {
  evt.preventDefault();

  const userInput = $input.val()

  if(!userInput) return

  $.ajax(URL + userInput).then(function(data) {
    render(data)
  
  },  function(error) {
    console.log(error, 'something went wrong')
  })
}

function render(gifData) {
  // function getRandomIdx(min, max) {
  //   return Math.floor(Math.random() * (max - min) + min)
  // }
  // randIdx = getRandomIdx(0, 20)

  // $(".row1").each(gifData, function(idx, element){

  // })

  for (x = 0; x < 9; x++) {
    let gifId = x
    $('.gif').each(function(){
      $(this).attr("src", gifData.data[gifId].images.original.url)})
  }
}

问题原因 #

你的render函数逻辑错误：外层for循环执行9次，每次循环都会遍历所有.gif元素，把它们的src全部设置成当前gifId对应的图片URL。循环结束时，所有img的src都会被最后一次循环（x=8）的图片覆盖，所以最终所有img显示的都是同一张图片。

修复方案 #

直接遍历每个.gif元素，利用遍历的索引值对应到gifData.data里的不同图片，这样每个img就能拿到不同的资源：

function render(gifData) {
  $('.gif').each(function(index) {
    // 先判断数据是否存在，避免索引越界报错
    if (gifData.data[index]) {
      $(this).attr("src", gifData.data[index].images.original.url);
    }
  });
}

如果想要随机分配不重复的图片，可以先把数据打乱再分配：

function render(gifData) {
  // 复制一份数据数组并打乱顺序
  const shuffledGifs = [...gifData.data].sort(() => Math.random() - 0.5);
  
  $('.gif').each(function(index) {
    if (shuffledGifs[index]) {
      $(this).attr("src", shuffledGifs[index].images.original.url);
    }
  });
}

内容的提问来源于stack exchange，提问作者sammy_p