点击启用/禁用div

我想在点击时启用覆盖div，并在点击时禁用它。点击启用/禁用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"); 

});

来源

2012-10-22 user1718397

什么是你想反正做什么？有一个全局变量来检查'click'处理程序是否应该执行，而不是移除事件处理程序并再次添加它会不会更容易？ – JCOC611

@ JCOC611谢谢，真是个好主意！ – user1718397

我猜你想以下几点：

$(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，等）或其由$(elementSelector).trigger(eventName);呼叫
eventHandler触发的自定义事件被执行的功能在事件发生时，这个函数的第一个参数是jQuery的事件对象。

而且还

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

相同

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

来源

2012-10-22 21:36:22

还有一些东西不能很好的与我保持一致，所以谢谢你的解释。 :) – user1718397

很高兴帮助:)关于'.on'和'.off'的完整文档，您应该参考：http://api.jquery.com/on/和http://api.jquery.com/关闭/ –

您可以使用show()和hide()为 '启用' 和 '禁用' 覆盖：

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

$("#wrapper_overlay") 
    .height($(document).height()) 
    .css({ 
    "opacity": 0.4, 
    "position": "absolute", 
    "top": 0, 
    "left": 0, 
    "background-color": "#666666", 
    "width": "100%", 
    "z-index": 100, 
    "display": "none" 
    }) 
    .on("click", function() { 
     $(this).hide(); 
    });

来源

2012-10-22 21:20:44 VisioN

谢谢，它工作顺利！ :) – user1718397

你会更好，把该CSS一类

CSS

#wrapper_overlay 
{ 
opacity : 0.4; 
position: absolute; 
top: 0; 
left: 0; 
background-color: #666666; 
width: 100%; 
z-index: 100; 
display:none; 
}

JAVASCRIPT

$("#sec_a_div").on("click",function() {  
    $("#wrapper_overlay") 
    .height($(document).height()) 
    .show(); 
}); 

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

来源

2012-10-22 21:34:08 Jan

点击启用/禁用div

回答

相关问题