javascript - 限制数组中的随机元素显示在图像标签中

Question

我创建了一组随机生成的图像，并且 2 个随机生成的图像将显示在我的 HTML 正文中创建的 2 个图像标签中。每个随机图像将只显示一次。

问题:

但是，我现在遇到了障碍。我试图将数组中的单个元素限制为随机化到最大值 n次。

含义:

Array_A = [A, B, C, D, E]

我随机选择了Array_A随机生成的图像将显示在我的两个 <img> 中在我的 HTML 正文中。因此，当我执行 console.log 时, 来自 Array_A 的两个元素将显示。

但是，我正在考虑限制例如:元素 C在Array_A显示 5 次，即 index = 2 的随机计数只有5，如果计数大于5，则再次调用random方法获取另一个随机元素。

我在网上搜索了任何引用资料，但一无所获。

var Brand_list = [];

 var BrandNameArray = ["lib/img/Brands/A.png", "lib/img/Brands/B.png", "lib/img/Brands/C.png", "lib/img/Brands/D.png", "lib/img/Brands/E.png"];

 //Randomised Brand Offer
 //Auto populate into brand container once randomised
 $('#BrandWinlist > img').each(function(i, img) {
   var flag = false;
   do {
     random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
     if (Brand_list.indexOf(random_BrandIndex) == -1) {
       flag = true;
       Brand_list.push(random_BrandIndex);
       console.log("random_BrandIndex:" + random_BrandIndex);
       var Brand = BrandNameArray[random_BrandIndex];
       $(img).attr('src', Brand).attr("alt", Brand).show();
     }
   } while (!flag);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="GameWinBrand_Container">
  <div id="BrandWinlist" class="GameWinBrand_innerScroll">
    <img id="GameBrand_1" style="width:230px; height:230px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
    <img id="GameBrand_2" style="width:230px; height:230px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
  </div>
</div>

因此，有什么方法可以限制随机元素的显示次数？

Answer 1

以下是从给定数组中获取随机元素的示例。

逻辑

1. 创建原始数组的副本，这样您就不会覆盖原始数组。
2. 获取随机数，并将其转换为整数。为确保其在范围内，您应该对虚拟数组的长度使用 %。
3. 现在您在正确的范围内有了随机索引，将此元素放入结果数组
4. 现在递减计数，如果存在的话。如果计数等于 0，则将其从虚拟数组中删除。这将确保元素在给定时间后不会重复。

现在您有一个随机且唯一的图像名称列表。返回它然后遍历它们并更新标签。

示例

var BrandNameArray = [{src: "lib/img/Brands/A.png", maxCount:2},
                      {src: "lib/img/Brands/B.png"},
                      {src: "lib/img/Brands/C.png", maxCount:1},
                      {src: "lib/img/Brands/D.png"},
                      {src: "lib/img/Brands/E.png"}];

function getRandomList(arr, len, maxRepeat) {
  // To store result
  var _r = []

  // To ensure original array is not updated
  var _a = arr.slice(0);

  for (var i = 0; i < len; i++) {
    // get random number and find index using % to ensure index is in range
    var _index = Math.floor(Math.random() * 10) % _a.length;
    _r.push(_a[_index].src);
    if (_a[_index].hasOwnProperty("maxCount") && --_a[_index].maxCount <=0) {
      // remove added element from temp array.
      _a.splice(_index, 1);
    }
  }
  return _r
}

console.log(getRandomList(BrandNameArray, 8))
console.log(getRandomList(BrandNameArray, 5))