Question

我已经设置了一个随机化图像数组的方法。然后将这些随机化图像附加到html正文中的id标记。我设置了2个图像ID，并试图将随机图像数组附加到图像ID。

但是，没有显示图像。

因此，做错了什么？请帮忙。

代码：

var BrandNameArray = ["lib/img/Brands/A.png", "lib/img/Brands/C.png", "lib/img/Brands/B.png"];

function Game_Congrats() {



  //Randomised Brand Offer
  //Auto populate into brand container once randomised
  for (i = 0; i < $('#list').find('img').length; i++) {

    random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);

    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    BrandNameArray.splice(random_BrandIndex, 1);
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
  }
}

}

.GameWinBrand_Container {
  position: absolute;
  top: 950px;
  left: 286px;
  height: 250px;
  width: 580px;
  overflow: hidden;
}
.GameWinBrand_innerScroll {
  position: relative;
  width: 550px;
  font-size: 30px;
  text-align: justify;
  color: #ffffff !important;
  overflow: hidden;
}
.GameWinBrand_Container::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  background-color: #ffffff;
}
.GameWinBrand_Container::-webkit-scrollbar {
  width: 12px;
  background-color: #5e5767;
}
.GameWinBrand_Container::-webkit-scrollbar-thumb {
  border-radius: 20px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #5e5767;
}

<div class="GameWinBrand_Container">
  <div id="BrandWinlist" class="GameWinBrand_innerScroll">
    <img id="GameBrand_1" style="width:250px; height:230px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
    <img id="GameBrand_2" style="width:250px; height:230px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
  </div>
</div>

Answer 1

你有一堆错误的id引用：

首先，你的循环没有执行，因为你没有一个id为list的元素。

其次，您没有标识为Brand_1的图像元素，等等。

所以将代码更改为：

for (i = 0; i < $('#BrandWinlist').find('img').length; i++) {
    random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    BrandNameArray.splice(random_BrandIndex, 1);
    $('#GameBrand_' + (i + 1)).attr('src', Brand).show();
}

请注意，您可以将来电链接到show。

选择器和循环也可以更简洁地编写如下：

$('#BrandWinlist > img').each(function (i, img) {
    random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    BrandNameArray.splice(random_BrandIndex, 1);
    $(img).attr('src', Brand).show();
});

作为奖励，您可以splice并一次性删除元素：

    var Brand = BrandNameArray.splice(random_BrandIndex, 1)[0];

Answer 2

img代码的ID从GameBrand开始。

改变这个：

 $('#Brand_' + (i + 1)).attr('src', Brand);

为：

 $('#GameBrand_' + (i + 1)).attr('src', Brand);

随机数组不会附加到id标记

2 个答案: