【发布时间】：2017-04-05 16:28:40
【问题描述】：
我试图在单击图像的缩略图时显示图像。
这是我现在的代码：
$('.theme-preview').click(function() {
console.log("fired");
var previewPopup = $(this).children('.popup-preview');
previewPopup.fadeIn("slow");
previewPopup
.css("position", "fixed")
.css("top", ($(window).height() / 2) - ($(this).children('.popup-preview').outerHeight() / 2))
.css("left", ($(window).width() / 2) - ($(this).children('.popup-preview').outerWidth() / 2));
return false;
});
$('html').click(function() {
$('.popup-preview').hide();
return false;
});.popup-preview {
background: black;
position: absolute;
z-index: 1;
display: none;
}
.col-md-6 {
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-6.jpg">
<div class="popup-preview">
<div class="title">THEME 1-1</div>
<img src="http://lorempixel.com/output/technics-q-c-240-180-6.jpg" width="100%">
<div class="preview-btn">
<a href="#"> <span>Preview</span></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-4.jpg">
<div class="popup-preview">
<div class="title">THEME 1-1</div>
<img src="http://lorempixel.com/output/technics-q-c-240-180-4.jpg" width="100%">
<div class="preview-btn">
<a href="#"> <span>Preview</span></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-3.jpg">
<div class="popup-preview">
<div class="title">THEME 1-1</div>
<img src="http://lorempixel.com/output/technics-q-c-240-180-3.jpg" width="100%">
<div class="preview-btn">
<a href="#"> <span>Preview</span></a>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="theme-preview"><img class="img-responsive center-block" src="http://lorempixel.com/output/technics-q-c-140-80-5.jpg">
<div class="popup-preview">
<div class="title">THEME 1-1</div>
<img src="http://lorempixel.com/output/technics-q-c-240-180-5.jpg" width="100%">
<div class="preview-btn">
<a href="#"> <span>Preview</span></a>
</div>
</div>
</div>
</div>
</div>单击任何缩略图时会显示图像。如果在它之外点击它会隐藏。
我要补充的是：
当我单击父类（例如缩略图 #1）并显示较大的图像时，我想在再次单击父类（例如缩略图 #1）时隐藏大图像。以及其他缩略图。
然后，当我单击缩略图#1 并显示较大的图像时，单击缩略图#2，缩略图#1 的大图像将隐藏，而缩略图#2 的较大图像将显示。其他缩略图也是如此。
注意：点击大图（本身）时，不应隐藏。
【问题讨论】：
标签： javascript jquery html css