JQuery图像弹出代码，点击删除类拒绝工作

因此，我创建了一个功能，它会放大图像，当它被点击时，再次点击时缩小图像。JQuery图像弹出代码，点击删除类拒绝工作

这对于大，小图像的基本CSS：

.bigpic { 
position: absolute; 
width:40%; 
z-index: 100; 
} 
.smallpic { 
width:20%; 
}

这是JQuery的：

$(document).ready(function() { 

$('.smallpic').click(function() { 
    $('.bigpic').removeClass('bigpic'); 
    $(this).removeClass('smallpic'); 
    $(this).addClass('bigpic'); 
    $('body').append("<button class='imgbutton'>Close</button>"); 
    }) 

$('.bigpic').click(function() { 
    $(this).addClass('smallpic'); 
    $(this).removeClass('bigpic'); 
    }) 
$('.imgbutton').click(function() { 
    $('.bigpic').addClass('smallpic') 
    $('.smallpic').removeClass('bigpic') 
}) 
});

正如你可以看到我做它添加“传记片”，并删除'smallpic'类，我也尝试了一种替代方法，添加一个可以关闭它的按钮。然而，点击图像或按钮的方法都不会使图像返回到其先前的状态。

来源

2015-04-21 James Tompkins

点击（）EVT绑定 –

@EricLease我有点健忘有关，有时后面添加分号，感谢您的提醒！ –

-1

当你绑定事件处理程序时，元素没有这些类，所以事件处理程序没有绑定到它们。

解决此问题的一种方法是使用事件委托。另一种方法是改变你的逻辑。

随着事件代表团，您绑定的处理程序元素的祖先，但有处理程序只有当click事件对这些元素来源于执行：

$(document).on('click', '.smallpic', function() { 
    $('.bigpic').removeClass('bigpic'); 
    $(this).removeClass('smallpic'); 
    $(this).addClass('bigpic'); 
    $('body').append("<button class='imgbutton'>Close</button>"); 
}); 

$(document).on('click', '.bigpic', function() { 
    $(this).addClass('smallpic'); 
    $(this).removeClass('bigpic'); 
});

但或许一个更好的办法是添加一个pic类到所有图像元素并绑定一个事件处理程序。您可以使用.toggleClass()来切换这些类，甚至可以使用.hasClass()来执行其他条件逻辑。

$('.pic').click(function() { 
    var $img = $(this); 
    $img.toggleClass('bigpic'); 
    $img.toggleClass('smallpic'); 
});

来源

2015-04-21 22:23:01

非常感谢，让许多事情变得更加清晰！很高兴有一个简单的解决方案，我一直试图解决一个星期的问题..：D –

@JohnS这可能是在老版本的jQuery，其中'.bind'，'.live'。和'.delegate'需要附加事件处理程序，因为元素被添加到DOM。但是，从v1.7开始，事件委托会通过'.on'自动发生。 '.click'和'.on（'click'）'是可以互换的。因此，如果使用相对较新版本的jQuery，大部分答案都是红鲱鱼。 –

@EricLease - 事件代表不会自动使用'.on（）';您必须将事件绑定到祖先元素，然后提供'selector'参数来标识子孙。从[jQuery文档]（http://api.jquery.com/on/#direct-and-delegated-events）：“如果'selector'被省略或为空，则事件处理程序被称为_direct_或_directly -bound_。[...]提供'selector'时，事件处理程序被称为_delegated_。“如果您将问题中的代码与我的答案中的代码进行比较，您会看到我不只是更改'.click（'to'.on（'click'，'。 –

如何类之间切换：

$('.imgbutton').click(function() { 
    $(this).toggleClass('smallpic bigpic'); 
})

来源

2015-04-21 22:24:00 renakre

如果我知道这个存在！帮助了很多，谢谢：） –

JQuery图像弹出代码，点击删除类拒绝工作

回答

相关问题