Javascript 单击放大图像，再次单击以最小化_Javascript_Jquery_Html_Css

Javascript 单击放大图像，再次单击以最小化

javascript jquery html css

Javascript 单击放大图像，再次单击以最小化,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在制作一个网站，要求图片可以点击。如果你点击图像，它应该放大并显示在屏幕中间。如果你再次点击，它应该会变小，然后回到原来的位置 $（文档）.ready（函数（）{ $（“#header”）.load（“header.html.header”）； $（“#footer”）.load（“footer.html.footer”）； $（“body”）。在（'click'，function（）上{ if（！$（“.img1.img2”）.hasClass（‘放大’）{ $（.img1.img2”）

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

$（文档）.ready（函数（）{
$（“#header”）.load（“header.html.header”）；
$（“#footer”）.load（“footer.html.footer”）；
$（“body”）。在（'click'，function（）上{
if（！$（“.img1.img2”）.hasClass（‘放大’）{
$（.img1.img2”）。在（'click'，function（）上{
$（this.addClass（‘放大’）；
});
}否则{
$（“正文”）。在（'单击'，'放大'，函数（）上{
$（this.removeClass（‘放大’）；
});
}
});
});
。放大{
位置：绝对位置；
z指数：2；
宽度：500px；
高度：600px；
前-10%；
左：300px；
}
您的单击处理程序实际上并没有执行您想要的逻辑，它只是分配其他单击处理程序。然后，在进一步单击时，它们将执行您想要的逻辑（某种程度上），但也会进一步分配更多的单击处理程序。点击几下之后，这会变得非常奇怪
您只需要对目标元素使用一键式处理程序：
$("body").on('click', '.img1, .img2', function(){

});

此处理程序将为页面上的任何.img1
或.img2
调用。在此处理程序中，执行您的逻辑：
if (!$(this).hasClass('enlarged')) {
    $(this).addClass('enlarged');
} else {
    $(this).removeClass('enlarged');
}

或者更简单一点：
$(this).toggleClass('enlarged');

在您的代码中发生了很多事情：
首先只在主体
元素上添加一个单击处理程序。这意味着当你第一次点击身体时，它会进入你的状态。在第一个if
中添加了另一个单击处理程序，但现在在.img1、.img2
上。相反的（删除放大的类）再次出现在主体
元素上，而不是.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();

var$elements=$（'.img'）；
//在这种情况下不是很相关，而是要有一个好习惯
//要实例化的方法
函数初始化（）{
addEventListeners（）；
}
//添加事件侦听器
函数addEventListeners（）{
$elements.on（'click.namespace'，handleClick）；
$（'body'）。单击（'click.namespace'，handleClickBody）；
}
//您可能希望处理要删除的上的单击
//任何图像的放大状态
函数handleClickBody（事件）{
$elements.removeClass（'diagrate-img--diagrated'）；
}
//如果单击图像，则要切换放大的状态类
函数handleClick（事件）{
event.preventDefault（）；//在上不是必需的，但如果使用链接则需要
$（event.target）；
}
初始化（）；

希望这能帮助您朝着创建可重用代码的正确方向前进。快乐编码
 终于！非常感谢。对不起，这么晚了，我很忙。我很接近你所拥有的。问题是，因为我所拥有的不起作用。我开始做不合逻辑的事情哈哈。在toggleClass之前，它毫无理由是不起作用的。现在它这样做了。再次感谢^^嗨，很抱歉回复晚了。我想知道，（'click.namespace'，handleClick）上的$elements.on行是什么意思平均值？更具体地说，$elements是什么？为什么是handleClick而不是function？我还是一个学生，你可能已经猜到了，哈哈。学校还没有jquery。$elements
设置在第1行；基本上选择某个类的所有元素<代码>$elements.on（'click.namespace，handleClick'）向所选元素添加事件侦听器，并引用handleClick
函数。因此，每当用户单击所选元素之一时，就会调用handleClick
-方法。