我问过两个类似的问题，但这个问题更具体、更详细。
我尝试实现一个内页购物车。当您点击产品图片时，网页会显示该产品的详细信息。
Google 图片搜索的作用如下: Google Image Search http://www.wy19900814fun.com/thumbnails/test.png 当您点击一张图片时，该图片的详细信息将显示在该图片下方(不是在屏幕底部)。
这是我的代码。昨天有人帮助我，当我点击图片时，一些信息可以显示在图片下方。
但我希望整个 (div class='container') 显示在该图片下方(包括该图片和所有信息，尽管它们当前相同)。
有谁可以帮助我或至少给我一些建议吗？我认为问题肯定出在 JQuery 脚本中。非常感谢。
附注单击第二行图片时也存在一些布局问题，一行中可能只有一张或两张图片。我不知道为什么，希望得到帮助。再次感谢。
$(document).ready(function(){
$('img').click(function() {
var $img = $(this),
offset = $img.offset(),
subPage = $('.container').hide().insertAfter('.pictures'),
nextImage = $img.next(),
finalImage = $img;
if (!$img.is(':last-child')) {
while (offset.top == nextImage.offset().top) {
nextImage = nextImage.next();
}
finalImage = nextImage.prev();
}
subPage.html('').append($img.clone()).insertAfter(finalImage).slideDown();
});
}); .pictures{
text-align:center;
}
.pictures img{
display:inline-block;
width:200px;
}
.container{
text-align:center;
}
.left-container{
vertical-align:middle;
display:inline-block;
border-style: solid;
border-width: 5px;
}
.left-container img{
}
.right-container{
vertical-align:middle;
display:inline-block;
border-style: solid;
border-width: 5px;
}
.color-group{
text-align:center;
}
.color-group ul{
padding:0;
}
.color-group li{
width:20px;
display:inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pictures">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572">
<img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571">
</div>
<div class = 'container'>
<div class = 'left-container'>
<img class='subpage-pic' src='http://cdn.shopify.com/s/files/1/0964/6944/products/10_large.jpg?v=1441133119'>
</div>
<div class = 'right-container'>
<h1>Green Leaf</h1>
<h3>Mari</h3>
<h5>Category, vendor needed?</h5>
<p>This is the description of Green Leaf case, just in case, I make it a little bit longer, testetstestsetsetsetsetsetsettsetsets</p>
<p>$19.99</p>
<select>
<option value ="volvo">Iphone 6</option>
<option value ="saab">Iphone 6+</option>
<option value="opel">Samsung 6S</option>
<option value="audi">Iphone 5</option>
</select>
<div class = 'color-group'>
<ul>
<li style="background-size:cover; background-color:green;"><a href="#">1</a></li>
<li style="background-size:cover; background-color:gray;"><a href="#">1</a></li>
<li style="background-size:cover; background-color:yellow;"><a href="#">1</a></li>
<li style="background-size:cover; background-color:red;"><a href="#">1</a></li>
<li style="background-size:cover; background-color:blue;"><a href="#">1</a></li>
<li style="background-size:cover; background-color:#FF00DD;"><a href="#">1</a></li>
</ul>
</div>
<Button>ADD TO CART</Button>
</div>
</div>最佳答案
感谢大家，通过更改 JQuery 代码，我得到了答案。
一个是.slideToggle，另一个是.attr
$(document).ready(function(){
$('.test').click(function() {
var $img = $(this).children('img'),
subPage = $('.container');
$('.subpage-pic').attr("src", $img.attr("src"));
var offset = $img.offset(),
nextImage = $img.next(),
finalImage = $img;
if (!$img.is(':last-child')) {
while (offset.top == nextImage.offset().top) {
nextImage = nextImage.next();
}
finalImage = nextImage.prev();
}
subPage.insertAfter(finalImage).slideToggle('fast');
});
}); .pictures{
text-align:center;
}
.pictures img{
display:inline-block;
}
.container{
text-align:center;
display:none;
}
.left-container{
vertical-align:middle;
display:inline-block;
}
.left-container img{
}
.right-container{
vertical-align:middle;
display:inline-block;
}
.color-group{
text-align:center;
}
.color-group ul{
padding:0;
}
.color-group li{
width:20px;
display:inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'container'>
<div class = 'left-container'>
<img class='subpage-pic' src='http://cdn.shopify.com/s/files/1/0964/6944/products/10_large.jpg?v=1441133119'>
</div>
<div class = 'right-container'>
<h1>Green Leaf</h1>
<h3>Mari</h3>
<h5>Category, vendor needed?</h5>
<p>This is the description of Green Leaf case, just in case, I make it a little bit longer, testetstestsetsetsetsetsetsettsetsets</p>
<p>$19.99</p>
<select>
<option value ="volvo">Iphone 6</option>
<option value ="saab">Iphone 6+</option>
<option value="opel">Samsung 6S</option>
<option value="audi">Iphone 5</option>
</select>
<div class = 'color-group'>
<ul>
<li style="background-size:cover; background-color:green;"><a href="#">1</a></li>
<li style="background-size:cover; background-color:gray;"><a href="#">1</a></li>
<li style="background-size:cover; background-color:yellow;"><a href="#">1</a></li>
<li style="background-size:cover; background-color:red;"><a href="#">1</a></li>
<li style="background-size:cover; background-color:blue;"><a href="#">1</a></li>
<li style="background-size:cover; background-color:#FF00DD;"><a href="#">1</a></li>
</ul>
</div>
<Button>ADD TO CART</Button>
</div>
</div>
<div class="pictures">
<div class='test'><img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20964301401_5d9fdf5c0d_o_large_958fe482-f2e7-4120-b4fe-016fcf612bf5_large.jpeg?v=1440873580"></div>
<div class='test'><img src="http://cdn.shopify.com/s/files/1/0251/0700/products/20770321799_5c81882577_o_large_c4c19c91-0532-422f-99d0-297b2731c4e3_large.jpeg?v=1440873580"></div>
<div class='test'><img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17108089939_8d4cefd10a_o_large_3dc1d49b-cb59-432a-a8d7-b118cfd61314_large.jpeg?v=1440873578"></div>
<div class='test'><img src="http://cdn.shopify.com/s/files/1/0251/0700/products/17950190230_114070818c_o_large_60ce5c71-7575-49ab-be75-ed2cfed6768d_large.jpeg?v=1440873577"></div>
<div class='test'><img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15175737319_c0db73446f_o_zps867eecb9_large_858814b0-6a80-4a34-b55d-97acc179cc91_large.jpeg?v=1440873576"></div>
<div class='test'><img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085342999_b8878e538e_o_zps54a2d381_large_f731cd55-f8d0-4e9a-8ba5-c254b4b8241d_large.jpeg?v=1440873575"></div>
<div class='test'><img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15085523427_bacc983407_o_zps2c262937_large.jpeg?v=1440873574"></div>
<div class='test'><img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15268975561_ed3f9f5c0b_o_zpsd4857119_large.jpeg?v=1440873573"></div>
<div class='test'><img src="http://cdn.shopify.com/s/files/1/0251/0700/products/15339485796_bed118ac3c_o_zpsf0927ac3_large.jpeg?v=1440873572"></div>
<div class='test'><img src="http://cdn.shopify.com/s/files/1/0251/0700/products/IMG_9092_zpsc38bd27c_large.jpeg?v=1440873571"></div>
</div>关于javascript - jQuery点击图片显示详细图片信息的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32490591/