Javascript 图像可以'；当图像为onclick时不会显示

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

所有图像被分组到不同的数组中，所有图像被链接；意思是，ImageArrayA[0]=ImageArrayB[0]=ImageArrayC[0]

已完成的操作：

我有3套图像源阵列：

1.）所有图像源阵列2.）次图像源阵列（弹出显示）3.）第三个图像源阵列

我已经从数组中获取了所有图像（所有图像源），并插入到一个特定位置，比如：

。图像按字母顺序显示

第二，我已经对进行了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/'
];
变量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；
forEach（函数（url、索引、originalArray）{
var img=document.createElement（'img'）；
img.id=“Logo-”+x；
img.src=url；
文件附件（img）；
var selectedOffer=SecondImage[index]；
//用弹出菜单选择品牌
img.onclick=函数（）{
$（“#SecondImage”）.fadeIn({
持续时间：幻灯片教学，
队列：false
});
$（“#Description”）.attr（'src'，selectedOffer.show（）；
};
selectedOffer.onclick=function（）{
控制台日志（“索引”+索引）；
var PhotoFrame=第三图像[索引]；
控制台日志（“相框”+相框）；
$（“#选择的第三个图像”）.attr（'src'，PhotoFrame）.show（）；
};
x++；
});
容器.附件（docFrag）
.Container{
位置：绝对位置；
顶部：300px；
左：300px；
高度：600px；
宽度：1260px；
}
.innerScroll{
位置：相对位置；
宽度：1250px；
高度：600px；
字体大小：25px；
颜色：#8d8989！重要；
溢出y：滚动；
}
选择要添加事件处理程序的提供程序
，它看起来只是一个字符串，而不是DOM中的元素：

var selectedOffer = SecondImage[index];

从

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

单击时指定给的第一个图像是使用以下对象创建的元素：

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

您需要
#SecondImage
才能单击
当然不能直接回答您的问题，但我可以建议如何创建上述界面

假设图像的id以
imgid
为前缀，然后是序列号或任何唯一id

然后，我将在
data
属性中添加pop图像
绝对URL
或仅添加
名称
，即
数据优先
和
数据第二
。

对于这个例子，我将使用完整的绝对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（）
获取第一个和第二个重叠图像，并将它们显示在模式中

如图所示，基于您的代码，我看不到任何要单击的元素。您将容器全部设置为
display:none请使用此小提琴重新创建问题：
<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>