随机数组未附加到 id 标签答案

【问题标题】：Randomised Array is not appended to id tag随机数组未附加到 id 标签
【发布时间】：2016-07-25 13:24:49
【问题描述】：

我设置了一种方法来随机化一组图像。然后这些随机图像将附加到 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>

【问题讨论】：

首先你的sn-p有语法错误：Uncaught SyntaxError: Unexpected token }
您的 jQuery 选择器以“#Brand_”开头，但元素包含“GameBrand_”。
你的循环还能运行吗？我在您的 HTML 中看不到任何与您的选择器匹配的 img 标签：即 $('#list').find('img').length 是 0

标签： javascript jquery arrays random

【解决方案1】：

你有一堆错误的 id 引用：

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

其次，您没有 ID 为 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];

【讨论】：

【解决方案2】：

img 标签的 id 以 GameBrand 开头。

改变这个：

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

到：

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

【讨论】：