在我的脚本中根据布尔值更新 DOM 时遇到问题答案

【问题标题】：Having trouble updating DOM based on boolean value in my scripts在我的脚本中根据布尔值更新 DOM 时遇到问题
【发布时间】：2015-11-24 22:01:55
【问题描述】：

我正在尝试在“管理用户”页面上为我的应用程序创建和“编辑”模式。我在带有readonly 属性的<input> 标记中拥有每个用户的值（例如姓名、电子邮件等）。我在页面顶部有一个名为“编辑模式”的按钮。单击该编辑模式时，我希望管理员能够单击输入字段并进行更改。我能够在单击时成功切换readonly 属性但我只希望在editing == true 时发生该功能，但在某些季节似乎DOM 从未感知到编辑布尔值已更改时。这是代码

$(document).ready(function(){
 var editing = false;
 $(".edit-mode-toggle").click(function(){
   editing = true;
 });

if(editing){
 $("user-block input").click(function(){
   $(this).removeAttr("readonly");
 });
}
$(".user-block input").blur(function(){
    $(this).attr("readonly", true);
  })
});

再次，当单击".edit-mode-toggle" 按钮并将editing 变量更改为true 时，我只想removeAttr。我当前的输出是，当我单击该按钮来切换布尔值时，我无法执行我的编辑，因为 DOM 没有看到布尔值发生了变化。任何人都知道可能会发生什么。一旦我找到解决方案，我肯定会生病derp。我只是在这里画空白。顺便说一句，严格来说是 jQuery，我知道这可以通过 Angular 或其他一些 3 路数据绑定框架轻松完成，但我想避免使用这些。谢谢！

【问题讨论】：

标签： javascript jquery dom boolean

【解决方案1】：

Dom 仅在加载时运行 if(editing) 条件，您想将该部分移动到您的 click 函数中。

$("user-block input").click(function(){
    if(editing){
        $(this).removeAttr("readonly");
    }
});

另外，您需要在$(document).ready() 函数之外定义var editing。

var editing = false;

$(document).ready(function(){
//other stuff
})

【讨论】：

他不会有编辑变量的范围问题吗？应该将所有点击处理程序移动到准备好的文档中。

【解决方案2】：

您应该更新代码，因为您在页面加载中附加了点击事件，并且 IF 语句中的第二个条件将始终附加，因为在页面加载中“编辑”变量始终设置为 false。

要修复它，您必须将“编辑”变量设为全局变量

 var editing = false;

$(document).ready(function(){

 $(".edit-mode-toggle").click(function(){
   editing = true;
 });


 $("user-block input").click(function(){
    if(editing){
       $(this).removeAttr("readonly");
    }else {
      $(this).attr("readonly", true);
         }
     });
} 
});

【讨论】：