0

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

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

4

1 回答 1

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"at 属性以实现 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，因为从您的代码中不太清楚您要做什么。

于 2013-11-22T04:27:48.717 回答