Javascript 单击时显示缩略图的大图像，但包含多个容器

关于Stackoverflow，人们提出了许多类似的问题。但在这里用其他的解决方案进行了几天的实验之后，我找不到任何和我想要做的完全匹配的解决方案

我想创建一个固定大小的容器，该容器从页面顶部开始始终保持相同的高度，从页面左侧开始始终保持相同的边距。容器底部有缩略图（最终会在右侧有箭头向上/向下滚动-还没到那一步），上面显示一个较大的图像，在较大图像的右侧有一个单独的框中显示信息。每次单击缩略图时，较大的图像将更改为显示新缩略图的较大版本以及相应的信息

所有缩略图均为150 x 150。所有较大的图像都是300 x 300。信息框中显示的信息是img alt文本。所有图像都存储在与代码相同的文件夹中，并且具有相同的文件名，并更改了“thumb”或“large”。例如，“image\u 01\u thumb.png”或“image\u 01\u large.png”

我的页面上有几个现有元素是整个站点的默认元素，我相信这些元素可能会导致问题

$（“#拇指img”）。单击（函数（）{
$（'#largeimage'）.attr（'src'，$（this.attr（'src'））.replace（'thumb'，'large'））；
$（'#description'）.html（$（this.attr（'alt'））；
});
*{
保证金：0；
填充：0；
}
标题{
背景图像：线性渐变（rgba（0,0,0,0.6），rgba（0,0,0,0.6）），url（pic1.png）；
高度：100vh；
背景尺寸：封面；
背景位置：中心；
}
.主导航{
浮动：对；
列表样式：无；
边缘顶部：45像素；
}
主导航李先生{
显示：内联块；
}
.主导航李a{
颜色：白色；
文字装饰：无；
填充：5px20px；
字体系列：“Roboto”，无衬线；
字体大小：16px；
}
.主导航李。主动a{
边框：1px纯白；
}
.主导航李a：悬停{
边框：1px纯白；
}
.logo img{
宽度：540px；
高度：自动；
浮动：左；
}
身体{
字体系列：monospace；
}
.行{
最大宽度：1200px；
保证金：自动；
}
#拇指{
填充顶部：10px；
溢出：隐藏；
}
#大图像{
填充：4px；
}
#拇指img{
浮动：左；
右边距：0px；
不透明度：0.8；
填充：4px；
}
#拇指img：悬停{
不透明度：1；
}
#描述{
背景：黑色；
颜色：白色；
位置：相对位置；
底部：0；
填充：10px 20px；
宽度：230px；
保证金：5px；
}
#面板{
位置：相对位置；
}
#画廊{
位置：绝对位置；
高度：520px；
宽度：660px；
左边距：30px；
边缘顶部：180像素；
}

项目






代码正常，问题是您在Js上拼错了大图像ID，是#大图像，不是#大图像

$('#thumbs img').click(function() {
    $('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
    $('#description').html($(this).attr('alt'));
});

这里的具体问题是什么？它不起作用？或者什么是阻塞点？你能提供一个工作样本吗？缩略图和主图像显示在适当的位置。但是，当单击新缩略图时，主图像不会改变，并且侧面没有显示任何描述。我正在尝试创建一个CodePen示例，尽管这会导致全新的错误。@Sudoku您是否尝试过一些简单的调试，比如添加
console.log（$（this.attr（'src'））
单击函数以再次检查函数是否使用了预期的数据？@NewToJS-我只得到“Object{https:false，httpsAutoUpgrade:false，privacyScore:2，entitiesBlocked:{}，entitiesNotBlocked:{}，scores:null}”当我打开页面时，我在控制台中一遍又一遍地重复。最后我放弃了让上面的工作，使用一个单独页面中的iframe来加载图像。让它在Firefox中正常工作，这是一个巨大的改进！我试着用小写的“image”来代替它，但没有什么区别。这就是你想要实现的目标？是的，除了主图像是缩略图的两倍大小外，页面左上角有一个徽标（与右侧的菜单一致），页面的背景图像随浏览器拉伸和调整大小。我想知道是否是徽标或页面背景导致了这些问题，但我无法更改它们，因为它们是整个网站的默认设置。但是Js还可以吗？是的，无论哪种方式，错误仍然会发生。我不认为JS代码本身是问题所在，但它与页面上阻止JS做任何事情的其他内容相冲突。但我不知道那是什么冲突。我不知道如何在CodePen中实现，因为我需要4个缩略图和4个大图像来显示正在发生/未发生的事情。JS代码应该识别单击的缩略图，然后通过将“thumb”替换为“large”来更改文件名，然后用该文件名打开图像并将其显示在大图像所在的位置。