Question

功能性：

最初，当用户输入页面时，会显示随机图像列表。然而，当用户点击按钮A时，将根据特定类别显示随机图像列表，因此它将仅显示来自主列表的少数随机图像。

因此，如果主列表有10个图像，并且当用户点击分类为水果的buttonA时，生成的图像将仅显示归类为水果的图像。因此，它将导致仅显示6个水果图像。其他4个非水果图像将不会显示。

已完成的工作：

我创建了2个数组：第一个数组用于主要的图像列表，第二个数组是类别数组：fruits。

其次，我为第一个数组和第二个数组创建了一个随机函数。

我附上了您的细读代码：

var slideDuration = 1200;
var idleTime = 0;

//MainImageArray
var MainNameArray = ["http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg", "http://loremflickr.com/g/320/240/paris,girl/all", "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg", "http://loremflickr.com/g/320/240/paris,girl/all", "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg", "http://loremflickr.com/g/320/240/paris,girl/all", "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg", "http://loremflickr.com/g/320/240/paris,girl/all", "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg", "http://loremflickr.com/g/320/240/paris,girl/all"]

//Fashion Array
var FruitArray = ["http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg", "http://loremflickr.com/g/320/240/paris,girl/all", "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg", "http://loremflickr.com/g/320/240/paris,girl/all", "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"]


$(function() {
  //Auto populate into brand container once randomised for each Brand image
  var MainNameArrayBackup = JSON.parse(JSON.stringify(MainNameArray));
  for (i = 0; i < $('#list').find('img').length; i++) {
    //To Set random Brand
    var random_BrandIndex = Math.floor(Math.random() * MainNameArray.length);
    //Assign Variable to generate random Brands
    var Brand = MainNameArray[random_BrandIndex];
    MainNameArray.splice(random_BrandIndex, 1);
    $('#Brand_' + (i + 1)).attr('src', Brand);
    $('#Brand_' + (i + 1)).show();
    console.log(Brand);
  }
  MainNameArray = MainNameArrayBackup; //re-assigning values back to array
});

function Fruit() {
  //Auto populate into brand container once randomised for each Brand image
  var MainNameArrayBackup = JSON.parse(JSON.stringify(FruitArray));
  for (i = 0; i < $('#list').find('img').length; i++) {
    //To Set random Brand
    var random_FruitIndex = Math.floor(Math.random() * FashionArray.length);
    //Assign Variable to generate random Brands
    var FruitBrand = FruitArray[random_FruitIndex];
    FruitArray.splice(random_FruitIndex, 1);
    $('#Brand_' + (i + 1)).attr('src', FruitBrand);
    $('#Brand_' + (i + 1)).show();
    console.log(FruitBrand);
  }
  FruitArray = MainNameArrayBackup;
}

.menu {
  background-color: #FFFFFF;
  filter: alpha(opacity=90);
  opacity: 0.98;
}
.Container {
  position: absolute;
  top: 300px;
  left: 300px;
  height: 600px;
  width: 1260px;
  overflow-y: scroll;
}
.innerScroll {
  position: relative;
  width: 1250px;
  height: 600px;
  font-size: 25px;
  color: #8d8989 !important;
  overflow: scroll;
}
#Fruit {
  position: absolute;
  width: 400px;
  height: 100px;
  top: 362px;
  left: 1548px;
  z-index: 9;
  outline: 0;
}

<div id="ChooseBrand" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; z-index=3; top:0px; left:0px;">

  <input type="text" id="SearchField" style="position:absolute; top:190px; left:660px; height:40px; width:600px; outline=0px; border: 0; font-size:25px; font-family:'CenturyGothic'; background: transparent; z-index=4;" autofocus src="lib/VivoCity/img/transparent.png">
  <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" data-brand="1">
      <img id="Brand_2" style="width:284px; height:140px; top:0px; left:330px; border:0px;" data-brand="2">
      <img id="Brand_3" style="width:284px; height:140px; top:0px; left:650px; border:0px;" data-brand="3">
      <img id="Brand_4" style="width:284px; height:140px; top:0px; left:965px; border:0px;" data-brand="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');">
    </div>
  </div>
  <button id="Fruit" onclick="Fruit()"></button>
</div>

问题：

此时，当我单击水果按钮时，将显示所有10个图像，而不显示水果阵列中所述的正确数量的图像。

因此，正确的行为是，当用户进入页面时，他们将看到一个随机的10个图像，并且当他们点击水果按钮时。它只显示来自水果阵列的5张图像。

因此，可能做错了什么？

请帮忙。谢谢。

onclick Button正在调用错误的图像数组

0 个答案: