Javascript JQuery关于单击图片时显示详细图片信息的问题

我问过两个类似的问题，但这是一个更具体、更详细的问题

我尝试实现一个inpage购物车。当您单击产品的图片时，网页将显示该产品的详细信息

以下是谷歌图像搜索的功能： 单击图像时，该图像的详细信息将显示在该图像下方（不在屏幕底部）

这是我的密码。昨天有人帮了我，所以当我点击一张图片时，一些信息会显示在图片下方

但是我希望整个（div class='container'）显示在该图片下方（包括该图片和所有信息，尽管它们目前是相同的）

有没有人能帮我或者至少给我一些建议？我认为问题肯定出在JQuery脚本中。非常感谢

另外，当您单击第二行图片时，也会出现一些布局问题，一行中可能只有一到两张图片。我不知道为什么，我希望得到一些帮助。再次感谢

$（文档）.ready（函数（）{
$（'img'）。单击（函数（）{
var$img=$（此），
偏移量=$img.offset（），
子页面=$（'.container'）.hide（）.insertAfter（'.pictures'），
nextImage=$img.next（），
finalImage=$img；
如果（！$img.is（':last child'））{
while（offset.top==nextImage.offset（）.top）{
nextImage=nextImage.next（）；
}
finalImage=nextImage.prev（）；
}
subPage.html（“”）.append（$img.clone（））.insertAfter（finalImage.slideDown（）；
});
});

。图片{
文本对齐：居中；
}
.图片img{
显示：内联块；
宽度：200px；
}
.集装箱{
文本对齐：居中；
}
.左货柜{
垂直对齐：中间对齐；
显示：内联块；
边框样式：实心；
边框宽度：5px；
}
.左集装箱img{
}
.右集装箱{
垂直对齐：中间对齐；
显示：内联块；
边框样式：实心；
边框宽度：5px；
}
.颜色组{
文本对齐：居中；
}
.颜色组ul{
填充：0；
}
.颜色组李{
宽度：20px；
显示：内联块；
}

绿叶
玛丽
类别，是否需要供应商？
这是对Green Leaf案例的描述，以防万一，我把它加长了一点，TestSetSetSets

19.99美元

iphone6
iphone6+
三星6S
iPhone5








添加到购物车

感谢大家，通过更改JQuery代码，我找到了答案

一个是.slideToggle，另一个是.attr

$（文档）.ready（函数（）{
$（'.test'）。单击（函数（）{
var$img=$（this）.children（'img'），
子页面=$（'.container'）；
$（'.subpage pic'）.attr（“src”），$img.attr（“src”）；
var offset=$img.offset（），
nextImage=$img.next（），
finalImage=$img；
如果（！$img.is（':last child'））{
while（offset.top==nextImage.offset（）.top）{
nextImage=nextImage.next（）；
}
finalImage=nextImage.prev（）；
}
子页面插入符（finalImage）.slideToggle（'fast'）；
});
});

。图片{
文本对齐：居中；
}
.图片img{
显示：内联块；
}
.集装箱{
文本对齐：居中；
显示：无；
}
.左货柜{
垂直对齐：中间对齐；
显示：内联块；
}
.左集装箱img{
}
.右集装箱{
垂直对齐：中间对齐；
显示：内联块；
}
.颜色组{
文本对齐：居中；
}
.颜色组ul{
填充：0；
}
.颜色组李{
宽度：20px；
显示：内联块；
}

绿叶
玛丽
类别，是否需要供应商？
这是对Green Leaf案例的描述，以防万一，我把它加长了一点，TestSetSetSets

19.99美元

iphone6
iphone6+
三星6S
iPhone5








添加到购物车

感谢大家，通过更改JQuery代码，我找到了答案

一个是.slideToggle，另一个是.attr

$（文档）.ready（函数（）{
$（'.test'）。单击（函数（）{
var$img=$（this）.children（'img'），
子页面=$（'.container'）；
$（'.subpage pic'）.attr（“src”），$img.attr（“src”）；
var offset=$img.offset（），
nextImage=$img.next（），
finalImage=$img；
如果（！$img.is（':last child'））{
while（offset.top==nextImage.offset（）.top）{
nextImage=nextImage.next（）；
}
finalImage=nextImage.prev（）；
}
子页面插入符（finalImage）.slideToggle（'fast'）；
});
});

。图片{
文本对齐：居中；
}
.图片img{
显示：内联块；
}
.集装箱{
文本对齐：居中；
显示：无；
}
.左货柜{
垂直对齐：中间对齐；
显示：内联块；
}
.左集装箱img{
}
操纵