单击父图像时不显示图像

function：

当用户进入第一页时，主图像被随机化并显示。 因此，当用户点击主图像（第一图像）时，将显示二次图像（第二图像）。

次要图像是第1图像的扩展，因此，例如，当用户点击苹果的第1图像时，显示蠕虫的第二图像。

我做了什么：

我已将第1张图像和第2张图像都设置为一组数组。 其次，第一图像的arrays是随机的，因此，我已经将第二图像arrays设置为附加到第一随机图像。

我已附上以下代码供您阅读：

//Brand Array var BrandNameArray = ["http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all"]; //Corresponding Image Array var OfferArray = ["http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all", "http://loremflickr.com/g/320/240/paris,girl/all"]; $(function() { //Auto populate into brand container once randomised for each Brand image var BrandNameArrayBackup = JSON.parse(JSON.stringify(BrandNameArray)); for (i = 0; i < $('#list').find('img').length; i++) { //To Set random Brand var random_BrandIndex = Math.floor(Math.random() * BrandNameArray.length); //Assign Variable to generate random Brands var Brand = BrandNameArray[random_BrandIndex]; BrandNameArray.splice(random_BrandIndex, 1); $('#Brand_' + (i + 1)).attr('src', Brand); $('#Brand_' + (i + 1)).show(); console.log(Brand); } BrandNameArray = BrandNameArrayBackup; //re-assigning values back to array }); //Choose Brand with popUp function selectBrand(index) { $('#BrandDescription').fadeIn({ duration: slideDuration, queue: false }); $("#All").hide(); $("#Back").hide(); $("#Beauty").hide(); $("#Choose").hide(); $("#Fashion").hide(); var chosenBrandIndex = OfferArray[BrandNameArray]; //Set option clicked to CSS change $('#Description').attr('src', chosenBrandIndex); $('#Description').show(); } function BrandDescription() { idleTime = 0; $("#border_page").fadeOut(function() { $("#BrandDescription").fadeIn(); }); } 

 .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; } 

问题：

我目前面临的主要问题是

**当我点击主图像时，根本没有显示次要图像。 因此，没有二次arrays图像被附加到第一随机化图像。 因此，不显示次要图像。

我迷失在可能出错或失踪的地方。 请帮忙。

非常感谢您的帮助。

Answer 1

看起来你在这里遇到了许多问题，一个是使用内联点击处理程序，这只是不好的做法，另一个是你使用不同的函数作用域，并且在窗口范围内不按顺序声明函数。 话虽如此，这里有一些有用的东西：

不要绑定你的内嵌javascript，试试这个：

在您的dom元素上使用数据标记，例如data-brand="1" ：

将jQuery绑定到整个列表中：

 $('#list img').on('click', function(){ var brandId = $(this).data('brand')); selectBrand(brandId); }) 

同时将函数定义移动到脚本块的顶部，因此它们在’dom ready’函数之前定义，因为您在窗口命名空间中将它们声明为全局变量。 将selectBrand定义为window.selectBrand，并将其作为window.selectBrand调用也可以。

随后我遇到了’slideDuration不是函数’错误，但这超出了这个问题的范围。

这是我用来解决问题的jsFiddle： https ：//jsfiddle.net/TimOgilvy/n1L9ja7m/

Answer 2

我可以在这里找出代码中的一些问题

1. 你正在使用$('#Vivo_BrandDescription')但Vivo_BrandDiscription是无效的id，我认为它应该是BrandDiscription

2. 在函数selectBrand(index)中的代码如下

    $('#BrandDescription').fadeIn({ duration: slideDuration, // <= this here slideDuration is undefined queue: false }); 

3. inline onclick="selectBrand('3');" 在图像标签中，我不知道为什么，但它不适合我，所以我做的是

    $('#list').find('img').on('click', function(){ return selectBrand(this.id.split('_')[1]); }); 

在这里做出这些改变之后就是小提琴

我已经更新了小提琴以正确获取图像可能这是你想要的。