随机图像不止一次显示

Question

功能性：

品牌形象是随机的，并显示在容器列表中。每个随机品牌形象只需显示一次。

已完成的工作：

首先，我创建了一个图像文件数组var ImageArray=["","","",....]。其次，我创建了一个随机方法var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);，最后，我创建了一个for循环，允许图像填充在html体内创建的表。

我附上了您的细读代码：

＆＃13;

＆＃13;

//Brand Array
var BrandNameArray = ["lib/img/PAGE03/Brands/Ads.png", "lib/img/PAGE03/Brands/AEO.png", "lib/img/PAGE03/Brands/AO.png", "lib/img/PAGE03/Brands/Beauty.png", "lib/img/PAGE03/Brands/Be.png", "lib/img/PAGE03/Brands/DS.png", "lib/img/PAGE03/Brands/Cch.png", "lib/img/PAGE03/Brands/Coton.png", "lib/img/PAGE03/Brands/Dwel.png", "lib/img/PAGE03/Brands/esBr.png", "lib/img/PAGE03/Brands/Et.png", "lib/img/PAGE03/Brands/E.png"];

$(function() {
  //Auto populate into brand container once randomised for each Brand image
  for (i = 0; i < $('#list').find('img').length; i++) {
    //To Set random Brand
    var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
    console.log(Brand);
  }
});

＆＃13;

.Container {
  position: absolute;
  top: 300px;
  left: 300px;
  height: 600px;
  width: 1250px;
  overflow-y: scroll;
}
.innerScroll {
  position: relative;
  width: 1250px;
  height: 600px;
  font-size: 25px;
  color: #8d8989 !important;
  overflow: scroll;
}

＆＃13;

<div class="Container">
  <div id="list" class="innerScroll">
    <!--1st Row-->
    <img id="Brand_1" style="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
    <img id="Brand_2" style="width:284px; height:140px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
    <img id="Brand_3" style="width:284px; height:140px; top:0px; left:650px; border:0px;" onclick="selectBrand('3');">
    <img id="Brand_4" style="width:284px; height:140px; top:0px; left:965px; border:0px;" onclick="selectBrand('4');">

    <!--2nd Row-->
    <img id="Brand_5" style="width:284px; height:140px; top:140px; left:0px; border:0px;" onclick="selectBrand('5');">
    <img id="Brand_6" style="width:284px; height:140px; top:140px; left:330px; border:0px;" onclick="selectBrand('6');">
    <img id="Brand_7" style="width:284px; height:140px; top:140px; left:650px; border:0px;" onclick="selectBrand('7');">
    <img id="Brand_8" style="width:284px; height:140px; top:140px; left:965px; border:0px;" onclick="selectBrand('8');">

    <!--3rd Row-->
    <img id="Brand_9" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');">
    <img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');">
    <img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');">
    <img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">

    <!--4th Row-->
    <img id="Brand_09" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');">
    <img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');">
    <img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');">
    <img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">.....(more rows of images)...
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

问题：

此时，随机图像正在显示。但是，显示的某些图像不止一次显示。

因此，如何在<div id ="list">范围内仅显示一次随机图像？

请帮忙。非常感谢你的帮助。

Answer 1

从数组中获取元素后，删除该项目，以便不再获取该项目

var Brand = BrandNameArray[random_BrandIndex]; //existing line
BrandNameArray.splice(random_BrandIndex,1); //new line 

此外，此数组包含在匿名方法中，因此您可以确保此数组不在外部使用。

我指的是这种匿名方法（我也进行了更改）

$(function() {
  var BrandNameArrayBackup = JSON.parse(JSON.stringify(BrandNameArray)); //taking backup
  //Auto populate into brand container once randomised for each Brand image
  for (i = 0; i < $('#list').find('img').length; i++) {
    //To Set random Brand
    var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    BrandNameArray.splice(random_BrandIndex,1); //new line 
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
    console.log(Brand);
  }
  BrandNameArray = BrandNameArrayBackup;//re-assigning values back to array
});

Answer 2

＆＃13;

＆＃13;

onStop()

＆＃13;

//Brand Array
var BrandNameArray = ["lib/img/PAGE03/Brands/Ads.png", "lib/img/PAGE03/Brands/AEO.png", "lib/img/PAGE03/Brands/AO.png", "lib/img/PAGE03/Brands/Beauty.png", "lib/img/PAGE03/Brands/Be.png", "lib/img/PAGE03/Brands/DS.png", "lib/img/PAGE03/Brands/Cch.png", "lib/img/PAGE03/Brands/Coton.png", "lib/img/PAGE03/Brands/Dwel.png", "lib/img/PAGE03/Brands/esBr.png", "lib/img/PAGE03/Brands/Et.png", "lib/img/PAGE03/Brands/E.png"];

$(function() {
  //Auto populate into brand container once randomised for each Brand image
  for (i = 0; i < $('#list').find('img').length; i++) {
    //To Set random Brand
    var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
    console.log(Brand);
  }
});

＆＃13;

.Container {
  position: absolute;
  top: 300px;
  left: 300px;
  height: 600px;
  width: 1250px;
  overflow-y: scroll;
}
.innerScroll {
  position: relative;
  width: 1250px;
  height: 600px;
  font-size: 25px;
  color: #8d8989 !important;
  overflow: scroll;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

//Brand Array
var BrandNameArray = ["lib/img/PAGE03/Brands/Ads.png", "lib/img/PAGE03/Brands/AEO.png", "lib/img/PAGE03/Brands/AO.png", "lib/img/PAGE03/Brands/Beauty.png", "lib/img/PAGE03/Brands/Be.png", "lib/img/PAGE03/Brands/DS.png", "lib/img/PAGE03/Brands/Cch.png", "lib/img/PAGE03/Brands/Coton.png", "lib/img/PAGE03/Brands/Dwel.png", "lib/img/PAGE03/Brands/esBr.png", "lib/img/PAGE03/Brands/Et.png", "lib/img/PAGE03/Brands/E.png"];

$(function() {
  //Auto populate into brand container once randomised for each Brand image
  for (i = 0; i < $('#list').find('img').length; i++) {
    //To Set random Brand
    var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
    console.log(Brand);
  }
});

＆＃13;

.Container {
  position: absolute;
  top: 300px;
  left: 300px;
  height: 600px;
  width: 1250px;
  overflow-y: scroll;
}
.innerScroll {
  position: relative;
  width: 1250px;
  height: 600px;
  font-size: 25px;
  color: #8d8989 !important;
  overflow: scroll;
}

＆＃13;

<div class="Container">
  <div id="list" class="innerScroll">
    <!--1st Row-->
    <img id="Brand_1" style="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
    <img id="Brand_2" style="width:284px; height:140px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
    <img id="Brand_3" style="width:284px; height:140px; top:0px; left:650px; border:0px;" onclick="selectBrand('3');">
    <img id="Brand_4" style="width:284px; height:140px; top:0px; left:965px; border:0px;" onclick="selectBrand('4');">

    <!--2nd Row-->
    <img id="Brand_5" style="width:284px; height:140px; top:140px; left:0px; border:0px;" onclick="selectBrand('5');">
    <img id="Brand_6" style="width:284px; height:140px; top:140px; left:330px; border:0px;" onclick="selectBrand('6');">
    <img id="Brand_7" style="width:284px; height:140px; top:140px; left:650px; border:0px;" onclick="selectBrand('7');">
    <img id="Brand_8" style="width:284px; height:140px; top:140px; left:965px; border:0px;" onclick="selectBrand('8');">

    <!--3rd Row-->
    <img id="Brand_9" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');">
    <img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');">
    <img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');">
    <img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">

    <!--4th Row-->
    <img id="Brand_09" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');">
    <img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');">
    <img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');">
    <img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">.....(more rows of images)...
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

//Brand Array
var BrandNameArray = ["lib/img/PAGE03/Brands/Ads.png", "lib/img/PAGE03/Brands/AEO.png", "lib/img/PAGE03/Brands/AO.png", "lib/img/PAGE03/Brands/Beauty.png", "lib/img/PAGE03/Brands/Be.png", "lib/img/PAGE03/Brands/DS.png", "lib/img/PAGE03/Brands/Cch.png", "lib/img/PAGE03/Brands/Coton.png", "lib/img/PAGE03/Brands/Dwel.png", "lib/img/PAGE03/Brands/esBr.png", "lib/img/PAGE03/Brands/Et.png", "lib/img/PAGE03/Brands/E.png"];

$(function() {
  //Auto populate into brand container once randomised for each Brand image
  for (i = 0; i < $('#list').find('img').length; i++) {
    //To Set random Brand
    var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = BrandNameArray[random_BrandIndex];
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
    console.log(Brand);
  }
});

＆＃13;

.Container {
  position: absolute;
  top: 300px;
  left: 300px;
  height: 600px;
  width: 1250px;
  overflow-y: scroll;
}
.innerScroll {
  position: relative;
  width: 1250px;
  height: 600px;
  font-size: 25px;
  color: #8d8989 !important;
  overflow: scroll;
}

＆＃13;

<div class="Container">
  <div id="list" class="innerScroll">
    <!--1st Row-->
    <img id="Brand_1" style="width:284px; height:140px; top:0px; left:0px; border:0px; outline:0px" onclick="selectBrand('1');">
    <img id="Brand_2" style="width:284px; height:140px; top:0px; left:330px; border:0px;" onclick="selectBrand('2');">
    <img id="Brand_3" style="width:284px; height:140px; top:0px; left:650px; border:0px;" onclick="selectBrand('3');">
    <img id="Brand_4" style="width:284px; height:140px; top:0px; left:965px; border:0px;" onclick="selectBrand('4');">

    <!--2nd Row-->
    <img id="Brand_5" style="width:284px; height:140px; top:140px; left:0px; border:0px;" onclick="selectBrand('5');">
    <img id="Brand_6" style="width:284px; height:140px; top:140px; left:330px; border:0px;" onclick="selectBrand('6');">
    <img id="Brand_7" style="width:284px; height:140px; top:140px; left:650px; border:0px;" onclick="selectBrand('7');">
    <img id="Brand_8" style="width:284px; height:140px; top:140px; left:965px; border:0px;" onclick="selectBrand('8');">

    <!--3rd Row-->
    <img id="Brand_9" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');">
    <img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');">
    <img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');">
    <img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">

    <!--4th Row-->
    <img id="Brand_09" style="width:284px; height:140px; top:280px; left:0px; border:0px;" onclick="selectBrand('9');">
    <img id="Brand_10" style="width:284px; height:140px; top:280px; left:330px; border:0px;" onclick="selectBrand('10');">
    <img id="Brand_11" style="width:284px; height:140px; top:280px; left:650px; border:0px;" onclick="selectBrand('11');">
    <img id="Brand_12" style="width:284px; height:140px; top:280px; left:965px; border:0px;" onclick="selectBrand('12');">.....(more rows of images)...
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;