點擊啓用/禁用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

回答

相關問題