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

Having trouble updating DOM based on boolean value in my scripts

本文关键字：DOM 更新 遇到 问题 于布尔 我的 脚本      更新时间：2023-09-26

我正试图在"管理用户"页面上为我的应用程序创建和"编辑"模式。我在具有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没有看到布尔值发生了变化。任何人都知道可能发生了什么。一旦我找到解决方案，我肯定会的。我只是在这里留白。顺便说一句，严格来说jQuery，我知道使用Angular或其他3向数据绑定框架可以很容易地做到这一点，但我想避免使用它们。非常感谢。

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

您应该更新您的代码，因为您在页面加载中附加了点击事件，并且IF语句中的第二个条件将始终被附加，因为在页面加载时"editing"变量总是设置为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);
         }
     });
} 
});
相关文章：