Question

我有一个图片库。当我点击它时，图像突出，因为身体背景从白色变为黑色。

当我再次点击图像时，它会恢复正常。

这就是我现在所拥有的：

$('img').click(function () {
  $('body').toggleClass("darken");
});

我希望我的用户能够点击页面上的任意位置并删除“变暗”的课程。

我尝试了hasClass语句，但没有成功。

if ($('body').hasClass('darken')) {
        $('body').click(function () {
        $(this).toggleClass("darken");
    });
    }

非常感谢，克莱门特。

Answer 1

您可以将点击事件处理程序绑定到<body>。但是，请务必停止在img上传播点击事件。

var $body = $("body"), $img = $("img");

$img.click(function(evt) {
  $body.toggleClass("darken");
  evt.stopPropagation();
});

$(document).click(function(){
  $body.removeClass("darken");
});

Answer 2

这是我使用的解决方案：

$(document).on('click', function(e) {
    var $body = $( 'body' ); 
    if(e.target.id && e.target.id === 'menu-btn') $body.toggleClass( 'navigation-opened' );
    else if(e.target.tagName.toLowerCase() !== 'nav') $body.removeClass( 'navigation-opened' );
});

Answer 3

这可能更简单，但会做同样的事情：

$('body.darker').live('click', function() { $(this).removeClass('darker'); } )

如果是hasClass，则单击removeClass

3 个答案: