Question

功能性： 当用户导航到主菜单页面时，将显示图像列表。当用户在主菜单中单击容器内的特定图像时，将以弹出显示图像的形式显示第二图像。最后，用户可以单击第二个图像，将显示第三个图像。

所有图像被分组到不同的阵列中，所有图像都被链接;意思是，ImageArrayA [0] = ImageArrayB [0] = ImageArrayC [0]。

已完成的工作：

我有3组图像源数组：

1。）所有图像源阵列2.）二级图像源阵列（弹出显示）3.）第三图像源阵列

我已从阵列中获取所有图像（所有图像源），并插入特定位置说：<div class="Container"> <div id= "list" class="innerScroll"></div></div>。图像按字母顺序显示。

其次，我已经完成了onclick并将第二个数组附加到第一个数组，因此，当用户点击主菜单中的主图像时，将显示相应的第二个图像。

最后，我尝试使用与获取第二张图像相同的方法来解释第三张图像。

var BrandNameArray = ['http://lorempizza.com/380/240',
  'http://dummyimage.com/250/ffffff/000000',
  'http://lorempixel.com/g/400/200/',
  'http://lorempixel.com/g/400/200/sports/'
];

var SecondImage = ['http://lorempizza.com/380/240',
  'http://dummyimage.com/250/ffffff/000000',
  'http://lorempixel.com/g/400/200/',
  'http://lorempixel.com/g/400/200/sports/'
];

var ThirdImage = ['http://lorempizza.com/380/240',
  'http://dummyimage.com/250/ffffff/000000',
  'http://lorempixel.com/g/400/200/',
  'http://lorempixel.com/g/400/200/sports/'
];

var container = document.getElementById('list');
var docFrag = document.createDocumentFragment();

var x = 0;
BrandNameArray.forEach(function(url, index, originalArray) {
  var img = document.createElement('img');
  img.id = "Logo-" + x;
  img.src = url;
  docFrag.appendChild(img);

  var selectedOffer = SecondImage[index];
  //Choose Brand with popUp
  img.onclick = function() {
    $('#SecondImage').fadeIn({
      duration: slideDuration,
      queue: false
    });
    $("#Description").attr('src', selectedOffer).show();
  };
  selectedOffer.onclick = function() {
    console.log("index" + index);
    var PhotoFrame = ThirdImage[index];
    console.log("PhotoFrame" + PhotoFrame);
    $("#Chosen_ThirdImage").attr('src', PhotoFrame).show();
  };
  x++;
});
container.appendChild(docFrag);

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

<div id="FirstImage" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; z-index=3; top:0px; left:0px;">
  <!--Container to display all alphabetically sorted images-->
  <div class="Container">
    <div id="list" class="innerScroll"></div>
  </div>
</div>

<div id="SecondImage" class="menu" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display:none; top:0px; left:0px; z-index=10;">

  <img id="Description" style="position:absolute; top:124px; left:534px; z-index=99;">
</div>

<div id="ThirdImage" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=14; top:0px; left:0px; ">

  <!--Photoframe that is selected from brand chosen-->
  <img id="Chosen_ThirdImage" style=" position:absolute; width:1920px; height:1080px; top:0px; left:0px;" />
</div>

问题：

当用户点击第一张图片时，我已设法让第二张图片正确显示，但是，当用户点击第二张图片时。第三张图片无法加载和显示。

含义：当用户点击imageA [0]时，我将获得imageB [0]和imageC [0]，如果我点击imageA [3]，我将获得imageB [3]和imageC [3] ]

我想问一下我做错了什么。请帮助，谢谢。

Answer 1

selectedOffer你试图添加一个事件处理程序，看起来只是一个字符串，而不是DOM中的一个元素：

var selectedOffer = SecondImage[index];

来自

var SecondImage = ['ht_p://lorempizza.com/380/240',  
  'ht_p://dummyimage.com/250/ffffff/000000',...

即字符串'http://dummyimage.com/250/ffffff/000000'

您在点击时指定的第一张图片是您创建的元素：

 var img = document.createElement('img');
  ...
  docFrag.appendChild(img);

您需要#SecondImage才能点击

Answer 2

好吧不是直接回答你的问题，但我可以建议如何创建上述界面。

让我们说图像的id为imgid作为前缀，然后是序列号或任何唯一ID。

然后我将分别在absolute urls属性name和data内添加流行图像data-first或data-second。
对于这个例子，我将使用完整的绝对URL。

<div class="containerofimg">    
  <img src="xyz/img/xyz.jpg" id="imgid234" data-first="http://lorempixel.com/600/300/sports/FirstImageA" data-second="http://lorempixel.com/600/300/sports/SecondImageA" />
  <img src="xyz/img/abc.jpg" id="imgid235" data-first="http://lorempixel.com/600/300/sports/FirstImageB" data-second="http://lorempixel.com/600/300/sports/SecondImageB"/>
  <img src="xyz/img/pqr.jpg" id="imgid236" data-first="http://lorempixel.com/600/300/sports/FirstImageC" data-second="http://lorempixel.com/600/300/sports/SecondImageC"/>
</div>

然后我将使用jQuery .data()或.attr()来抓取第一个和第二个叠加图像，并将其显示在模态中。

如 Demo 。

所示

当图像被点击时，图像无法显示

2 个答案: