Если hasClass then removeClass на клике

У меня есть галерея изображений. Когда я нажимаю на него, изображения выделяются, потому что фон тела идет от белого до черного.

Когда я снова нажимаю на изображение, он возвращается к нормальному состоянию.

Это то, что у меня есть сейчас:

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

Я хочу, чтобы мои пользователи могли щелкнуть в любом месте страницы и удалить класс «затемнить».

Я попробовал инструкцию hasClass, но не имел успеха.

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

Большое спасибо, Клеман.

2
nl ja de

3 ответы

You can bind the click event handler to <body>. But, be sure to stop the propagation of the click event on img.

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

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

$(document).click(function(){
  $body.removeClass("darken");
});
2
добавлено
@cfocket, я считаю, что это действительно плохая идея использовать $ ("*") . Я не заметил ни одной икоты, когда увидел ее, хотя
добавлено автор Alexander, источник
Возможно, самый простой способ сделать то, что требуется OP. Престижность!
добавлено автор Jehanzeb.Malik, источник
Работает как шарм. Результат в реальном времени: bettercheckthekids.com/polar-2 Большое спасибо Александру!
добавлено автор cfocket, источник
Кажется, есть немного икоты, когда я возвращаюсь к любому изображению. Особенно, когда вы добираетесь до последнего изображения. Вы тоже это заметили?
добавлено автор cfocket, источник
Ну, я заменил («тело») на ('*'). Подойдет мне очень хорошо.
добавлено автор cfocket, источник

Это может быть более сокращенным, но будет делать то же самое:

$('body.darker').live('click', function() { $(this).removeClass('darker'); } )
1
добавлено
Использование .live() устарело как jQuery 1.7
добавлено автор Alexander, источник
Извините, человек не получил шанс попробовать ваше решение. ура
добавлено автор cfocket, источник
Александр, ты прав! Он должен быть переписан следующим образом: $ (document) .on ('click', 'body.darker', function() {$ (this) .removeClass ('darker');}); Я был просто использован для функции .live :-) Для справки: api.jquery.com/live

Это решение, которое я использовал:

$(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' );
});
0
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda