如何在表格中显示随机图像答案

【问题标题】：How do I display random images to a table如何在表格中显示随机图像
【发布时间】：2020-08-03 00:22:46
【问题描述】：

我有一张桌子和一个图片文件夹。我想在页面加载时使用 html 和 javascript 在表格的每个单元格中随机插入一个图像。我还希望图像的顺序在每次刷新时都不同，并且不会重复。到目前为止，我的 html 看起来像这样：

<table>
    <tr>
        <td><img src"" id="00></td>
        <td><img src"" id="01></td>
        <td><img src"" id="02></td>
    </tr>
    <tr>
        <td><img src"" id="10></td>
        <td><img src"" id="11></td>
        <td><img src"" id="12></td>
    </tr>...
</table>

我的 js 看起来像这样：

window.onload = showPics;
let myPics = new Array('images/butterfly.jpg', 'images/cat.jpg', 'images/dinosaur.jpg',
                       'images/dog.jpg', 'images/duck.jpg', 'images/elephant.jpg');

function showPics() {
    let randomPic = Math.floor(Math.random() * myPics.length);
    document.querySelectorAll('#00, #01, #02, #10, #11, #12').src = myPics[randomPic];

但是图像没有显示。请帮忙

【问题讨论】：

标签： javascript html image html-table

【解决方案1】：

你的.querySelectorAll() 返回数组，所以你需要循环它。此外，您应该为每个元素调用new random，而不是一次，否则它将包含相同的图像

window.onload = function() {
  let myPics = ['https://via.placeholder.com/150?text=1', 'https://via.placeholder.com/150?text=2', 'https://via.placeholder.com/150?text=3',
    'https://via.placeholder.com/150?text=4', 'https://via.placeholder.com/150?text=5', 'https://via.placeholder.com/150?text=6'
  ];

  function showPics() {
    document.querySelectorAll('.img').forEach(function(tag) {
      let index = getRandomIndex();
      tag.src = myPics[index];
      tag.addEventListener('click', getImageName);
      tag.dataset.index = index;
    })
  }

  function getRandomIndex() {
    return Math.floor(Math.random() * myPics.length);
  }

  function getImageName() {
     alert(myPics[this.dataset.index])
  }

  showPics();
}

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

为了获得不重复的图像，请跟踪您已经使用过的索引（确保您有更多或相同数量的图像而不是占位符）。

let usedImages = {};

function getRandomPic {
    let randomPic;

    do {
        randomPic = Math.floor(Math.random() * myPics.length);
    } while (usedImages[randomPic] === true);

    usedImages[randomPic] = true;

    return myPics[randomPic];
}

【讨论】：

现在我的图片在表格中是随机排列的，我想知道是否可以点击其中一张并获取它的数组索引？有谁知道如何做到这一点？
把它放到data-index 属性和dataset.index。 developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…
再次感谢 Justinas，但我认为我的评论不清楚。我希望能够单击表中的图像并将其数组索引作为字符串返回。例如，单击蝴蝶并获取“images/butterfly.jpg”。这可能吗？我已经尝试过 indexOf 方法，但我总是收到 -1
@sgt_pepper85 我理解你的问题，但你误解了我的回答。检查更新的答案。
太棒了！再次感谢您

【解决方案2】：

在您想要更改的所有图像中添加一个类似changing 图像的类，并像这样更改showPics，并且您不需要将new 关键字用于创建数组[] 将正常工作，并且不要将随机图像存储在始终为您提供相同图像的变量中。

function showPics() {
    document.querySelectorAll('.changeImages').forEach(val => {
      val.src = myPics[Number(Math.floor(Math.random() * myPics.length))];
    })   
}

【讨论】：