Question

我有3个阵列：

Array E = ["lib/img/Brand/A.png", "lib/img/Brand/B.png", "lib/img/Brand/C.png"];
Array F = ["lib/img/offer/A1.png", "lib/img/offer/B1.png", "lib/img/offer/C1.png"];
Array G = ["lib/img/print/A2.png", "lib/img/print/B2.png", "lib/img/print/C2.png"];

其次，我创建了2个img标签来显示来自Array E的2个随机生成的数组项。

第三，当我在img标签中点击来自Array E的随机生成的图像中的任何一个时，将显示来自阵列F的图像。

E.g： img标签显示来自Array E的项目A.png和项目C.png，当我点击数组E中的项目A.png时，将显示数组F中的项目A1.png。

最后，当我点击数组F中显示的项目时，将显示数组G中的相应项目。

E.g： img标签显示来自Array E的项目B.png和项目A.png，当我从阵列E中单击项目B.png时，将显示来自阵列F的项目B1.png。当我点击数组F中的项目B1.png时，将显示项目B2.png。

我做了什么：

我已经设法从数组E中显示2个随机生成的项目，当我点击数组E中的任何一个图像项目时，我能够从数组F中获取正确的图像项目。

问题：

然而，当我点击数组F中的图像项时，我无法从数组G获取任何图像项，当我为数组G执行console.log时，它返回未定义的结果。并且Array G中的项目实际上都没有与Array F一起附加。

我可以帮助我做错了吗。

*代码：*

Array_E = ["lib/img/Brand/A.png", "lib/img/Brand/B.png", "lib/img/Brand/C.png"];
Array_F = ["lib/img/offer/A1.png", "lib/img/offer/B1.png", "lib/img/offer/C1.png"];
Array_G = ["lib/img/print/A2.png", "lib/img/print/B2.png", "lib/img/print/C2.png"];
var Brand_list = [];
var printOfferFrame = "";

//Randomised Brand Offer
//Auto populate into brand container once randomised
$('#BrandWinlist > img').each(function(i, img) {
  random_BrandIndex = Math.floor(Math.random() * Array_E.length);
  console.log("random_BrandIndex:" + random_BrandIndex);

  var Brand = Array_E[random_BrandIndex];

  Brand_list.push(random_BrandIndex);
  $(img).attr('src', Brand).show();
});

function selectBrand(index) {
  selectedOffer = Array_F[Brand_list[index - 1]];
  console.log("selectedOffer: " + selectedOffer);
  $("#Pa_Description").attr('src', selectedOffer).show();

  //THIS IS THE PART I AM HAVING AN ISSUE, RETURN RESULT IS UNDEFINED
  var printOfferSelected = Brand_list[Brand_list.length - 1];
  console.log("printOfferSelected : " + printOfferSelected);

  printOfferFrame = Array_G[parseInt(Array_F[Brand_list[index - 1]])];

  console.log("printOfferFrame : " + Array_G[printOfferSelected - 1]);
}

function PrinOffer() {
  ajax_Print();
}

<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>

<div id="BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=9; top:0px; margin:auto;">

  <img id="Pa_Description" class="BrandDescription" style="position:absolute; width: 1080px; height:762px; top:500px; left:0px; z-index=99;">

  <button class="Print" onclick="PrintOffer()"></button>
</div>

Answer 1

尝试以下方法：

Array_E = ["lib/img/Brand/A.png", "lib/img/Brand/B.png", "lib/img/Brand/C.png"];
Array_F = ["lib/img/offer/A1.png", "lib/img/offer/B1.png", "lib/img/offer/C1.png"];
Array_G = ["lib/img/print/A2.png", "lib/img/print/B2.png", "lib/img/print/C2.png"];


//Randomised Brand Offer
//Auto populate into brand container once randomised
$('#BrandWinlist > img').each(function(i, img) {
  random_BrandIndex = Math.floor(Math.random() * Array_E.length);
  console.log("random_BrandIndex:" + random_BrandIndex);
  var Brand = Array_E[random_BrandIndex];
  $(img).attr({'src':Brand,'data-index':random_BrandIndex}).show();
});
$('.GameWinBrand_innerScroll img').on('click',function(e){
  e.preventDefault();
  index = $(this).attr('data-index');//get index of the img
  $("#Pa_Description").attr('src', Array_F[index]).show();//here you may need to use parent to show it
   console.log("printOfferSelected : " + Array_F[index]);
  console.log("printOfferFrame "+Array_G[index]);//alert the image from the index provided by the index attribute
});

function PrinOffer() {
  ajax_Print();
}

.GameWinBrand_Container {
  position: absolute;
  top: 950px;
  left: 286px;
  height: 250px;
  width: 500px;
  overflow: hidden;
}
.GameWinBrand_innerScroll {
  position: relative;
  width: 480px;
  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;
}
.BrandMenu {
  background-color: #D3D3D3;
  filter: alpha(opacity=98);
  opacity: 0.98;
}

<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" >
    <img id="GameBrand_2" style="width:230px; height:230px; top:0px; left:330px; border:0px;" >
  </div>
</div>

<div id="BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=9; top:0px; margin:auto;">

  <img id="Pa_Description" class="BrandDescription" style="position:absolute; width: 1080px; height:762px; top:500px; left:0px; z-index=99;">

  <button class="Print" onclick="PrintOffer()"></button>
</div>

数组返回'undefined'结果

1 个答案: