JavaScript или JQuery при нажатии кнопки переключения - PullRequest
Новая
       8

JavaScript или JQuery при нажатии кнопки переключения

0 голосов
/ 05 сентября 2018

Для сайта Squarespace художника, пытающегося отобразить кнопку на лайтбоксе, чтобы пользователи могли отправить прямое сообщение о пьесе, которая им нравится.

Я могу заставить кнопку отображаться при нажатии большого пальца изображения, но не могу заставить ее скрыться при закрытии лайтбокса.

** Сначала я попробовал его в Vanilla JS, но пришлось перейти на jQuery ¯\_(ツ)_/¯ Проверьте на jsFiddle

Отображение контактной кнопки на thumb-image клик: 

$('.thumb-image').click(function () {
    var content = $("body").find('.form-block');
    content.addClass("toggle-content");
});

И моя попытка скрыть кнопку на лайтбоксе закрывается. 

$('.featherlight-close').click(function () {
    var hideButton = $("body").find('.form-block');
    hideButton.addClass("toggle");
});

Разбивка моего мыслительного процесса:

  1. Событие : щелкните по изображению большого пальца -> Видимый лайтбокс 

    <img class="thumb-image loaded" src="...>
    • лайтбокс изначально отсутствует на странице, он загружается JavaScript прямо под открывающим тегом body .

  2. Отображение кнопок контактов 

    <div class="form-block"></div>

    • пытается отобразить контактную кнопку с помощью метода jQuery addClass и этого класса 

      .toggle-content { display: block; }

  3. Событие : закрыть лайтбокс 

    <a class="lightbox-close"></a>

    • закрывающая "X" на псевдоэлементе, и я обнаружил, что это действительно усложняет ситуацию: | 

      lightbox-close:before

  4. Контактная кнопка скрыта - при нажатии переключить класс, чтобы скрыть кнопку. 

    .toggle { display: none}

Проверьте на jsFiddle

Ваша помощь в этом очень ценится.

1 Ответ

0 голосов
/ 05 сентября 2018

Вы должны удалить существующий класс и добавить новые классы для переключения функциональности 

$('.thumb-image').click(function () {
    var content = $("body").find('.form-block');
    content.removeClass("toggle");
    content.addClass("toggle-content");
});

$('.featherlight-close').click(function () {
    var hideButton = $("body").find('.form-block');
    hideButton.removeClass("toggle-content");
    hideButton.addClass("toggle");
});
...