Question

我有一个使用Handlebars.js模板构建的模块，我正确地打开和关闭它，但是信息没有更新，可以看到 here

现在我拥有它以便更新信息，但是当点击“＆＃39; x＆＃39;”时，toggleClass不会被激活。或.overlay。这可以看作 here 。

这是我的jQuery函数来激活模态。

 $(document).on('click', "a.btn", function (e) {
           $(e.target).parents('.image-container').prev('.modal').toggleClass('modal--show');
        });

        $(document).on('click', '.overlay', function (e) {
            $(e.target).prev('.modal').toggleClass('modal--show');
        });

        $(document).on('click', '.modal__close', function () {
            $('.modal').toggleClass('modal--show');
        });

我怎样才能使这个模态同时打开和关闭，以及显示正确的信息？

我尝试过的一些事情......

用$(e.target)

$(this)

Answer 1

您的代码存在的问题是您正在尝试切换所有.modal div的类。但是您需要切换仅.modal.modal--show的类。同样在叠加的情况下，你需要找到父div而不是兄弟div。因此，请使用.closest()代替.prev()

因此，如果您将代码修改为

        $(document).on('click', '.overlay', function (e) {
            $(e.target).closest('.modal.modal--show').toggleClass('modal--show');
        });

        $(document).on('click', '.modal__close', function () {
            $('.modal.modal--show').toggleClass('modal--show');
        });

无法动态创建模态以在点击时关闭用.parents（）打开

1 个答案: