javascript - 单击放大 img，再次单击最小化

Question

我正在制作一个要求图片可点击的网站。如果您单击图像，它应该会放大并显示在屏幕中间。如果您随后再次单击，它应该再次变小并回到原来的位置。

$(document).ready(function() {
    $("#header").load("header.html .header");
    $("#footer").load("footer.html .footer");

    $("body").on('click', function(){

        if(!$(".img1, .img2").hasClass('enlarged')){

            $(".img1, .img2").on('click',function(){
                  $(this).addClass('enlarged');
            });
        }else{
            $("body").on('click', '.enlarged', function(){
                  $(this).removeClass('enlarged');
            });
        }

    });
});

.enlarged{
  position:absolute;
  z-index:2;
  width:500px;
  height:600px;
  top:-10%;
  left:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="container">
  <aside class="aside"><img src="fotos/foto1.JPG" id="img1" class="img1" style="transform:rotate(90deg);"/><img src="fotos/foto2.JPG" class="img2" style="transform:rotate(90deg);"/></aside>
  <div class="box"></div>
</div>

我当前的脚本有效，但非常不稳定。它只会放大一次，您必须连按三次。

我之前已经发过 question 了，但是我更新后没有人回答。

此外，我不确定如何在 Stack Overflow 上添加图片，否则我会制作一个片段。

Answer 1

您的点击处理程序实际上并没有执行您想要的逻辑，它只是分配其他点击处理程序。然后在进一步点击时，它们正在执行您想要的逻辑(某种程度上)，而且还进一步分配更多点击处理程序。单击几下后，这将变得非常奇怪。

您只需要一个目标元素的点击处理程序:

$("body").on('click', '.img1, .img2', function(){

});

此处理程序将为页面上的任何 .img1 或 .img2 调用。在此处理程序中，执行您的逻辑:

if (!$(this).hasClass('enlarged')) {
    $(this).addClass('enlarged');
} else {
    $(this).removeClass('enlarged');
}

或者，更简单:

$(this).toggleClass('enlarged');