javascript - 显示模式时添加模糊类，隐藏模式时删除

Question

我正在使用 Kyle Fox 的 jquery modal 插件，我正在尝试向主体添加一个“模糊”类。我正在使用以下 jquery 代码，但它似乎不起作用。我把它放在 body 关闭之前，但是当我点击“切换”类的链接时它什么也没做。如果我只使用 'addclass' 位，它确实有效，但当然我无法删除 'blur' 类。

    $(function() {

 $(".toggle").click(function () {
     $('body').addClass("blur");

});

$('body').click(function () {
    $('body').removeClass('blur');
});

});

要触发事件，请将鼠标悬停在“kraantje pappie”上方的第一轮图片上时单击“更多信息”链接。

提前致谢!

Answer 1

这是您的代码中发生的事情:

1. 当点击.toggle 元素时，blur 类被实际添加到body 元素

2. 添加类后，它会立即被脚本的第二部分删除，因为您在单击 body 时使用 removeClass。当您点击 .toggle 时，您还点击了作为父元素的 body ;)

所以，这是错误的:

$('body').click(function () {
    $('body').removeClass('blur');
});

当模式打开时，使用其他选择器更改 body 类，例如添加一个关闭按钮并为其附加 click 事件。

要查看我是否正确，只需从您的页面中删除上面的代码，然后尝试单击第一个模式元素(“KRAANTJE PAPPIE”)。

干杯。