Question

我正在尝试在“管理用户”页面上为我的应用程序创建和“编辑”模式。我在<input>标记中包含readonly属性的每个用户值（例如姓名，电子邮件等）。我在页面顶部有一个名为“编辑模式”的按钮。单击该编辑模式后，我希望管理员能够单击输入字段并进行更改。我能够在点击时成功切换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);
  })
});

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

Answer 1

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

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

此外，您需要在var editing功能之外定义$(document).ready()。

var editing = false;

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

Answer 2

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

要解决此问题，您必须制作变量＆＃39;编辑＆＃39;全局变量

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

在我的脚本中基于布尔值更新DOM时遇到问题

2 个答案: