Javascript 当我第二次单击删除Jquery background darker时，它将保持黑暗

我跟着这个 由于本教程有两个功能按钮，所以做了一些更改，但我想用一个按钮做同样的操作。第一次点击效果很好，但是当我第二次点击时，黑暗的背景仍然存在并且不会消失，下面是代码和JSFIDLE：

$(document).ready(function () {
    var isOpen = false;

    function showOverlayBox() {
        //if box is not set to open then don't do anything
        if (isOpen == false) return;
        // set the properties of the overlay box, the left and top positions
        $('#help-content').toggle();
        // set the window background for the overlay. i.e the body becomes darker
        $('.bgCover').css({
            display: 'block',
            width: $(window).width(),
            height: $(window).height(),
        });
    }

    function doOverlayOpen() {
        //set status to open
        isOpen = true;
        showOverlayBox();
        $('.bgCover').css({
            opacity: 0
        }).animate({
            opacity: 0.5,
            backgroundColor: '#000'
        });
        // dont follow the link : so return false.
        $('#help').attr("class", "helpc");
        return false;
    }

    function doOverlayClose() {
        //set status to closed
        isOpen = false;
        $('#help-content').css('display', 'none');
        // now animate the background to fade out to opacity 0
        // and then hide it after the animation is complete.
        $('.bgCover').css({
            opacity: 0
        }).animate({
            opacity: 0
        }, function () {
            $(this).hide();
        });
        $('#help').attr("class", "help");
    }

    // if window is resized then reposition the overlay box
    $(window).bind('resize', showOverlayBox);
    // activate when the link with class launchLink is clicked
    $('.help').click(doOverlayOpen);
    // close it when closeLink is clicked
    $('.helpc').click(doOverlayClose);

});

---

因为绑定关闭事件时.helpc不存在，关闭事件不附加，元素仍然绑定到帮助类的函数，因为jQuery缓存元素而不是类名。相反-您应该在创建容器元素时使用event delegetion，并检查事件的来源：

$(".wrapper").on("click", ".help", doOverlayOpen);
$(".wrapper").on("click", ".helpc", doOverlayClose);

---

这是一把小提琴：

您将事件附加到错误的位置，这是一把可以工作的小提琴：

---

基本上，发生的是第一个单击事件被附加，但即使您更改了div的类，第二个事件也从未附加。我正在使用jQuery的.on，就像他们以前的.live一样，这里有文档

奇怪，你的小提琴似乎工作得很好。@Mike86不，不是，如果您先选中，则黑色背景不存在，但当您单击按钮时，黑色背景会出现，但当您第二次单击按钮时，黑色背景会再次消失。我想您没有理解，我的问题是黑色背景不是框，我按照您说的做了，但它是相同的。

// activate when the link with class launchLink is clicked
$(document).on( 'click', '.help', doOverlayOpen );
// close it when closeLink is clicked
$(document).on( 'click', '.helpc', doOverlayClose );