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');

Answer 2

您的代码中发生了很多事情：

您首先只在body元素上添加点击处理程序。这意味着您第一次点击它进入条件的身体。在您的第一个if中添加了另一个点击处理程序，但现在在.img1, .img2上。相反（删除enlarged类）又在body元素上，而不在.img1, .img2元素上。

一些建议：

仅使用1个类切换放大状态
就个人而言，我是BEM的忠实粉丝，现在可能不相关。
分解你的JS问题;我会为这种行为创建一个插件

一些代码指向正确的方向：

var $elements = $('.enlarge-img');

// in this case not very relevant, but a good habit to have
// a method to instantiate
function initialize() {
  addEventListeners();
}

// adding event listeners
function addEventListeners() {
  $elements.on('click.namespace', handleClick);
  $('body').click('click.namespace', handleClickBody);
}

// You might want to handle clicks on the <body> to remove
// the enlarged state of any image
function handleClickBody(event) {
  $elements.removeClass('enlarge-img--enlarged');     
}

// If you click an image, you want to toggle the enlarged state class
function handleClick(event) {
  event.preventDefault(); // not necessary on a <img/> but needed if you use a link
  $(event.target).toggleClass('enlarge-img--enlarged`);
}

initialize();

希望这可以帮助您找到创建可重用代码的正确方向。快乐的编码！

单击时放大img，再次单击以最小化

2 个答案: