javascript - 在我的脚本中无法根据 boolean 值更新 DOM

Question

我正在尝试在“管理用户”页面上为我的应用程序创建和“编辑”模式。我在 <input> 中拥有每个用户值(例如姓名、电子邮件等)标记为 readonly属性。我在页面顶部有一个名为“编辑模式”的按钮。单击该编辑模式后，我希望管理员能够单击输入字段并进行更改。我能够成功切换 readonly单击属性但我只希望该功能在 editing == true 时发生但在某些季节，当编辑 boolean 值发生变化时，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);
  })
});   

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

Answer 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
})