Question

HTML

<div id="portfolio_content">
<h4 class="titles">Portfolio</h4>

   //Pictures//

<img class="myImg" src="images/cabinconcept.jpg" width="40" height="300" />
<img class="myImg" src="images/aloneconcept.jpg" width="40" height="300" />
<img class="myImg" src="images/woodsconcept.jpg" width="40" height="300" />
</div>

JAVASCRIPT

<script>
$('.myImg').click(function() {
if ($(this).height() == 300) {
    $(this).width('60%');
    $(this).height('60%');

}
else {
    $(this).width(40);
    $(this).height(300);
}
})
</script>

我希望当有人点击它们时让我的图像打开，但我的问题是，如果我点击多张图片，另一张图片保持打开状态，我尝试了不同的方式，对我没什么用处，你呢？有什么想法我该如何解决这个问题？我想在点击新图片时关闭先前打开的图片。

Answer 1

您可以将所有width的{{1}}和height设置回原始尺寸，只增加点击图片的尺寸：

.myImg

Answer 2

将您当前的js编辑为

$('.myImg').click(function() {
if ($(this).height() == 300) {
    $(".myImg").height(300);
    $(".myImg").width(40);
    $(this).width('60%');
    $(this).height('60%');
}
else {
    $(this).width(40);
    $(this).height(300);
}
})

这将首先使所有图像myImg更小，然后打开你点击的图像

图片查看器Javascript

2 个答案: