本文介绍如何使用 jQuery 动态地控制删除账户按钮的显示与隐藏，只有当用户在指定的输入框中输入正确的邮箱地址时，删除账户按钮才会显示。本文将提供完整的 HTML 结构、CSS 样式以及 jQuery 代码，并详细解释代码的实现逻辑，帮助开发者快速实现类似功能。
HTML 结构
首先，我们需要定义 HTML 结构。包括一个禁用的显示用户邮箱的输入框，一个用于用户输入邮箱的输入框，以及一个删除账户按钮。
<input type="text" disabled="" placeholder="[email protected]" name="emp_email" class="form-control"> <input type="text" placeholder="If you want to delete your account please enter your Email" value="" name="email_pass" class="form-control email-pass-delete"> <input type="button" value="Delete account?" class="btn btn-custom del_acount hide_del_button"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
注意：
- 第一个输入框 emp_email 被设置为 disabled，用于显示用户的邮箱地址，placeholder 属性用于显示默认的邮箱地址。
- 第二个输入框 email_pass 用于用户输入邮箱地址，其 class 为 email-pass-delete，jQuery 将会监听这个输入框的 input 事件。
- 删除账户按钮 del_acount 初始状态是隐藏的，通过 hide_del_button class 控制。
CSS 样式
接下来，我们需要定义 CSS 样式来控制删除账户按钮的显示与隐藏。
.hide_del_button {
display: none;
}这个 CSS 规则将 display 属性设置为 none，从而隐藏带有 hide_del_button class 的元素。
jQuery 代码
最后，我们需要编写 jQuery 代码来实现动态显示和隐藏删除账户按钮的逻辑。
$(document).ready(function() {
var user_email = $('input[name="emp_email"]').attr('placeholder');
$(".email-pass-delete").on("input", function() {
var current_email = $('.email-pass-delete').val();
if (user_email == current_email) {
$(".del_acount").removeClass("hide_del_button");
} else {
$(".del_acount").addClass("hide_del_button");
}
});
});代码解释：
- $(document).ready(function() { ... }); 确保在 DOM 加载完成后执行代码。
- var user_email = $('input[name="emp_email"]').attr('placeholder'); 获取显示用户邮箱的输入框的 placeholder 属性值，并将其存储在 user_email 变量中。
- $(".email-pass-delete").on("input", function() { ... }); 监听 email-pass-delete class 的输入框的 input 事件。当用户在输入框中输入内容时，该事件会被触发。
- var current_email = $('.email-pass-delete').val(); 获取用户在输入框中输入的当前邮箱地址。
- if (user_email == current_email) { ... } else { ... } 比较用户输入的邮箱地址和存储的邮箱地址是否相等。
- 如果相等，则移除 del_acount 元素的 hide_del_button class，从而显示删除账户按钮。
- 如果不相等，则添加 del_acount 元素的 hide_del_button class，从而隐藏删除账户按钮。
总结
通过以上步骤，我们就可以实现一个简单的用户输入邮箱后显示删除账户按钮的功能。核心逻辑在于监听输入框的 input 事件，比较用户输入的值和预期的值，然后动态地添加或移除 CSS class 来控制按钮的显示与隐藏。 记住，在实际应用中，应该对用户输入进行更严格的验证，并采取其他安全措施来确保用户账户的安全。
