如何使用NodeList显示随机图片？

Question

我有一个问题需要帮助。我已经为此工作了大约半天。我是一名还在上学的新软件开发人员。

我一直在尝试生成一个随机数以用作imageTabsList 节点列表的索引，然后使用getAttribute() 方法从我的HTML 文件中获取longdesc 属性的值，该文件已写入图像路径源到我的 for 循环下方的 longdesc 属性。所以每次我重新加载页面时，都会显示一个新图像。我的问题是如何在我的 .js 文件中完成此操作

var ImagePicker = {    
      init: function() {      
    imagePic = document.getElementById('pic');        
    imageTabsDiv = document.getElementById('imageTabs');        
    imageTabList = imageTabsDiv.getElementsByTagName('img');        
    for(var i =0; i <imageTabList.length; i++) {        
      imageTabList[i].onclick = imageTabList.imageTabClick           
      function imageTabClick() {          
        imagePath = this.getAttribute('longdesc');            
        imagePath.src = imagePic;          
      };        
    };      
  randomIndex = imageTabList[randomPics];      
  randomIndex = imageTabsDiv.getAttribute('longdesc');      
  randomIndex.src = imagePic;      
  randomPics: function() {      
    return Math.floor(Math.random() + 1);      
  };      
  };    
};    
Core.start(ImagePicker);

我从 HTML 文件中引用的代码...

<div id="primaryPic">
    <img src="images/pics/primaryPic.png" id="pic" alt="Primary Content Picture">
    
    <div id="imageTabs">
        <img src="images/pics/imageTab01.png" id="imageTab01" alt="imageTab01" longdesc="images/pics/bavLine.png"><br>
        <img src="images/pics/imageTab02.png" id="imageTab02" alt="imageTab02" longdesc="images/pics/frenchBugler.png"><br>
        <img src="images/pics/imageTab03.png" id="imageTab03" alt="imageTab03" longdesc="images/pics/Gendarme_a_Cheval_1870.png"><br>
        <img src="images/pics/imageTab04.png" id="imageTab04" alt="imageTab04" longdesc="images/pics/primaryPic.png">
    </div>
</div>

我试图在每次重新加载页面时引用longdesc 属性来更改图片。

Answer 1

要从imageTabList 中随机选择一张图片，您可以这样做：

var randomImg = imageTabList[Math.floor(Math.random() * imageTabList.length)];

---

要在每次加载页面时获取随机的longDesc 属性，可以使用以下代码：

var imgs = document.getElementById("imageTabs").document.getElementsByTagName("img");
var randomImg = imgs[Math.floor(Math.random() * imgs.length)]
var randomLong = randomImg.getAttribute("longdesc");

仅供参考，您应该在属性中使用data-longdesc="xxxx" 以实现 HTML5 兼容性。

---

这里有一个解释：

Math.random()

在0 和1（包括0，不包括1）之间创建一个随机浮点数，例如0.4857462391。

Math.random() * imageTabList.length

在0和imageTabList.length之间创建一个随机浮点数（包括0，不包括imageTabList.length如8.239824379。

为了使该值成为整数（对于数组索引），我们在其上调用 Math.floor()，如下所示：

Math.floor(Math.random() * imageTabList.length)

现在您有一个介于 0 和 imageTablList.length - 1 之间的随机整数，您可以使用它从该 NodeList 中抓取一个随机项目。

---

如果您需要任何进一步的帮助，请显示您的 HTML，因为从您的代码中不太清楚您要做什么。