javascript - 图片查看器 JavaScript

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

您可以将所有.myImg的宽度和高度设置回原始尺寸，并且仅增加点击图像的尺寸:

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