JavaScript或jQuery点击按钮显示

Question

对于一个艺术家的广场网站，试图显示一个按钮在灯箱，以便用户可以发送一个直接的信息，关于一个他们喜欢的作品。

我可以让按钮显示时，一个图像拇指被点击，但似乎不能让按钮隐藏时，灯箱关闭。

**我一开始在香草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. 事件：单击图像拇指-> Lightbox可视

- _lightbox is originally not present on the page, it is loaded by JavaScript directly below the opening_ `body` _tag_.

​

1. 联系人按钮显示

- _trying to display the contact button by jQuery's_ `addClass` _method and this class_

.切换-内容{显示:块；}

​

1. 事件：关闭灯箱

- _the close "X" is on a pseudo element, and I found this to really complicate things :|_ 

光明盒-关闭:前

​

1. 联系人按钮隐藏-点击切换类隐藏按钮。 .toggle { display: none}

查看jsFiddle

非常感谢你在这方面的帮助。

Answer 1

您必须删除现有的类并为切换类添加新的类。

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