Question

功能性：

我在主菜单列表中有一个主图像数组，当点击列表中的图像时，将显示次要图像。

问题：

所有主图像将始终显示次要图像。但是，有一个主图像在单击时显示2个次要图像。此时，当我点击具有2个次要图像的特定主图像时，不显示2个次要图像文件，当在控制台日志上检查时，它返回404，这很奇怪。

因此，我打算实现的目标是：

单击图像A时，将显示次要图像A. 其次，当我点击有2个次要图像的图像时;比如图像B，二次图像B1和B2将同时显示。

我做了什么：

在次要图像数组中，我在第一个数组中设置了一个内部数组。并在每个图像上单击它，以便读取正确的数组索引。

代码：

var MainImageArray = ["http://lorempizza.com/380/240", "http://lorempixel.com/g/400/200/"];

var OfferArray = [
  ["http://lorempizza.com/380/240"],
  ["http://lorempixel.com/g/400/200/sports/", "http://lorempixel.com/g/400/200/"]
];

//Append array of images to list container in alphabetical Order
var x = 0;
number = 0;
Photoframe = "";
PrintPhotoFrame = "";
var container = document.getElementById('list');
var docFrag = document.createDocumentFragment();

BrandNameArray.forEach(function(url, index, originalArray) {
  var img = document.createElement('img');
  img.id = "Logo-" + x;
  img.src = url;
  docFrag.appendChild(img);

  //Choose Brand with popUp
  var selectedOffer = OfferArray[index];
  console.log("ImgClickedindex" + index);
  img.onclick = function() {
    document.getElementById("ButtonAudio").play();
    for (i = 0; i < innerList; i++) {
      $('#BrandDescription').fadeIn({
        duration: slideDuration,
        queue: false
      });
      $("#Description").attr('src', selectedOffer).show();
      console.log("index: " + index);
      number = index;
      //Choose Photoframe from second image
      PhotoFrame = PhotoFrameArray[index];
      console.log("PhotoFrameArray[index]:" + index);
      //Choose borderImage in canvas drawing
      PrintPhotoFrame = PrintPhotoFrameArray[index];
      console.log("PrintPhotoFrameArray[index]:" + index);
    }
  };
  x++;
});
container.appendChild(docFrag);

<div id="Vivo_ChooseBrand" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=1; top:0px; left:0px;">

  <!--Container to display all alphabetically sorted images-->
  <div class="Container">
    <div id="list" class="innerScroll"></div>
  </div>

</div>

<div id="BrandDescription" class="menu" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; top:0px; left:0px; z-index=2;">

  <img id="Description" style="position:absolute; top:124px; left:534px; z-index=99;">
</div>

因此，我想请求如何解决这个问题的帮助？问题是我能够显示其他次要图像，但是当涉及到双次要图像时，它拒绝显示。

请帮忙。感谢

不显示内部数组中的图像

0 个答案: