jquery - 单击启用/禁用div

Question

我想在点击时启用覆盖div并在点击时禁用它。

现在，我的代码看起来像这样。也许.on .off使用不当？

$(function() {
    $("#sec_a_div").on("click","#wrapper_overlay");


    var docHeight = $(document).height();

    $("#wrapper_overlay")
      .height(docHeight)
      .css({
         'opacity' : 0.4,
         'position': 'absolute',
         'top': 0,
         'left': 0,
         'background-color': '#666666',
         'width': '100%',
         'z-index': 100
      })

    $.off("click","#wrapper_overlay");

});

Answer 1

我想您需要以下内容：

$(function() {
    var docHeight = $(document).height();
    var overlay = $("#wrapper_overlay")
      .height(docHeight)
      .css({
        'opacity' : 0.4,
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'background-color': '#666666',
        'width': '100%',
        'z-index': 100
      }).hide();

    overlay.on('click', function(){
        $(this).hide();
    });

    $("#sec_a_div").on('click', function(){
        overlay.show();
    });
});

了解jQuery的.on和.off方法并不难：

$(elementSelector).on(eventName, eventHandler);
$(elementSelector).off(eventName, eventHandler);

哪里：


elementSelector可以是任何内容，从CSS选择器字符串到DOM对象的集合，或者是先前创建的jQuery选择。
eventName是事件的名称，可以是默认值（click，mouseover，keydown等）之一，也可以是由$(elementSelector).trigger(eventName);调用触发的自定义事件
eventHandler是事件发生时执行的函数，其中赋予该函数的第一个参数是jQuery的事件对象。


并且

$(elementSelector).on('click', function(){
});

是相同的

$(elementSelector).click(function(){
});