我刚刚创建了此功能,以便在单击切换按钮后更改页面标题,但由于某种原因,单击后它会卡住。我不确定这个函数哪里出了问题,我用 Jquery 编写了它,但即使用纯 JavaScript 编码,它也会做同样的事情。这是 Jquery 中的
function toggleButton() { console.log($('#toggle-employees').prop('checked')) if($('#toggle-employees').prop('checked', true)) { console.log("true"); $("#bodyTitle").html("Employees"); } else { console.log("false"); $("#bodyTitle").html("Roles"); }; }; <h1 id="bodyTitle" class="navbar-brand"></h1> <div class="form-check form-switch hidden" id="employee-toggler"> <input class="form-check-input" onclick="toggleButton()" type="checkbox" role="switch" id="toggle-employees"> <label class="form-check-label" for="toggle-employees">Employees</label> </div>
这里是 JSPlayground 中该函数的链接,但也不起作用。
P粉5881526362024-04-04 21:12:02
==
或 ===
来比较值。 =
用于赋值。由于 checked
属性是一个布尔值,因此可以直接使用 document.getElementById('toggle-employees').checked
作为条件来检查是否为 true
。checked
属性发生变化时无需设置;这完全是多余的。function toggleButton() { var paragraph = document.getElementById("bodyTitle") console.log(document.getElementById('toggle-employees').checked) if (document.getElementById('toggle-employees').checked) { console.log("true"); paragraph.innerHTML = "Employees"; } else { console.log("false"); paragraph.innerHTML = "Roles"; } };