<分区>
标签 javascript jquery html css
<分区>
我目前正忙于创建一个登录表单，该表单会在按下某个登录按钮时向下滑动。我已经通过使用以下代码完成了这项工作:
$(document).ready(function (){
$('.loginButton').click(function(){
$('.login').slideToggle();
});
});
我为登录表单制作的 HTML 如下所示:
<main>
<div class="login">
<h5>Log in here</h5>
<form>
<label for="username">Username:</label>
<input type="text" id="username" required>
<label for="password">Password:</label>
<input type="password" id="password" required>
<p class="registertext">Click <a href="register.html">here</a> to register!</p>
<input type="submit" value="Sign in">
</form>
</div>
</main>
我现在遇到的问题是我的网站目前使用四个 HTML 页面。因此，在它们的每个 HTML 文件中，都存在上述 HTML 代码。现在我想摆脱这个重复的代码，但我真的不知道什么是好的和有效的方法来做到这一点。我自己已经尝试过一些有效的方法，但我不确定它们是否有效。我做的第一件事是在按下登录按钮后将 div 内的 HTML 代码附加到 div，我只让这种情况发生一次，即 bool 值一次。
var firstTime = true;
$(document).ready(function (){
$('.loginButton').click(function(){
if (firstTime) {
$('.login').append('<h5>Log in here</h5><form><label for="username">Username:</label><input type="text" id="username" required><label for="password">Password:</label><input type="password" id="password" required><p class="registertext">Click <a href="register.html">here</a> to register!</p><input type="submit" value="Sign in"></form>');
firstTime = false }
$('.login').slideToggle();
});
});
我发现的另一个解决方案是将 div 中的代码放在一个单独的 HTML 文件中，然后将该文件加载到 div 中。
$(document).ready(function (){
$('.login').load(login.html);
$('.loginButton').click(function(){
$(this).toggleClass('active');
$('.login').slideToggle();
});
});
最佳答案
混合 HTML 和 JS 是一个糟糕的原则；在 JS 中进行大量显式 DOM 操作或 HTML 字符串是不好的(难以阅读/维护)。
您需要一种服务器端技术来进行模板化(在 Java、PHP、Ruby 等中)，或者您可以使用客户端技术，如 React 或 AngularJS。
关于javascript - 需要一种有效的方法来摆脱多个 HTML 文件中的重复 HTML 代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38922498/