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未定义，即使我们认为这是单击事件，您的测试也有误。

主要困难是无法检测到框外的点击，而无法检测到打开框的点击，否则最终会同时打开和关闭。 因此，为什么我添加两个测试以确保目标不是处理特定行为的按钮。

另外，我没有使代码加倍以关闭模式，而是使它在您单击任何位置时都触发​​了对关闭按钮的单击，这样仅一个事件就可以保持最新状态。 请注意，这也可以通过创建您自己的事件来实现，但是...