Javascript變量本身會更改值

Question

因此，我正在為我的網頁編寫代碼，如果您打開了兩個框之一（注冊，登錄），則無法打開另一個框。 我遇到了以下問題：一旦您將鼠標從包裝盒中按下來關閉包裝盒，值將更改為1，並且您應該能夠再次打開包裝盒，但是突然之間，它將自身設置為0，您可以不再打開盒子了。

如果使用“關閉”按鈕關閉包裝盒，則可以再次打開包裝盒，但不能通過在包裝盒外面按下來打開。

在JS文件的開頭，我聲明var openable並將其值設置為1。

var openable = 1; 

使用CLOSE按鈕關閉代碼：

$("#closeReg").click(function(){
    openable = 1;
    console.log(openable);
    $('#register').css('display','none');
    $("#register").siblings().css("opacity", "1");
});

開箱即用的代碼：

var subject = $("#register");
if(e.target.id == subject.attr('id')){
    subject.fadeOut();
    subject.siblings().css("opacity", "1");
    openable = 1;
    console.log(openable);  
} 

打開盒子的代碼：

$("#regButton").click(function(){
    console.log(openable);
    if(openable == 1){
    $("#register").fadeIn();
    $("#register").siblings().css("opacity", "0.5");
    openable = 0;
    console.log(openable);
    }
});

整個代碼： https : //pastebin.com/vC461VGy

Answer 1

 var openable = 1; $("#closeReg").click(function() { openable = 1; console.log(openable); $('#register').css('display', 'none'); $("#register").siblings().css("opacity", "1"); }); $("#regButton").click(function() { console.log(openable); if (openable == 1) { $("#register").fadeIn(); $("#register").siblings().css("opacity", "0.5"); openable = 0; console.log(openable); } }); $('body').click(function(e) { if ($(e.target).closest('#register').length <= 0 && !$(e.target).is('#closeReg') && !$(e.target).is('#regButton')) { $('#closeReg').trigger('click'); } }); 

 #register { background-color: #FFAAAA; } body { height: 200px } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="closeReg">Close</button> <button id="regButton">Open</button> <div id="register"> register box </div> 

在這里，嘗試此示例。

您在外部單擊時隱藏的代碼無法正常工作，主要是因為e未定義，即使我們認為這是單擊事件，您的測試也有誤。

主要困難是無法檢測到框外的點擊，而無法檢測到打開框的點擊，否則最終會同時打開和關閉。 因此，為什么我添加兩個測試以確保目標不是處理特定行為的按鈕。

另外，我沒有使代碼加倍以關閉模式，而是使它在您單擊任何位置時都觸發​​了對關閉按鈕的單擊，這樣僅一個事件就可以保持最新狀態。 請注意，這也可以通過創建您自己的事件來實現，但是...