如果hasClass然後點擊removeClass

我有一個圖片庫。當我點擊它時，圖像脫穎而出，因爲身體背景從白色變爲黑色。如果hasClass然後點擊removeClass

當我再次點擊圖像時，它會恢復正常。

這是我現在：

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

我希望我的用戶能夠在頁面上的任意位置單擊，並刪除類「變暗」。

我試過hasClass語句但沒有成功。

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

非常感謝你，克萊門特。

來源

2013-02-07 cfocket

您可以單擊事件處理程序綁定到<body>。但是，請務必停止img上的點擊事件的傳播。

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

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

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

來源

2013-02-07 12:00:05 Alexander

可能是做OP要求的最簡單的方法。獎勵！ –

工程就像一個魅力。現場直播結果如下：http://bettercheckthekids.com/polar-2非常感謝亞歷山大！ – cfocket

當我重新點擊任何圖像時，似乎有點小打嗝。特別是當你看到最後一張圖片時。你也注意到了嗎？ – cfocket

-1

這可能是更多的簡寫，但會做同樣的：

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

來源

2013-02-07 11:59:35 CyberBrain

的'.live（）'是不贊成的jQuery 1.7 – Alexander

亞歷山大的用法，你說得對！它應該被重寫成如下所示：'$（document）.on（'click'，'body.darker'，function（）{$（this）.removeClass（'darker'）;}）;'我只是習慣了.live功能:-)僅供參考：http://api.jquery.com/live/ – CyberBrain

對不起，沒有機會嘗試你的解決方案。乾杯 – cfocket

這是我使用的解決方案：

$(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'); 
});

來源

2014-10-28 14:31:28

如果hasClass然後點擊removeClass

回答

相關問題