如果用户可以输入电子邮件到输入字段，我如何才能显示按钮?

Question

我有一个用户配置文件更新表单和一个删除帐户按钮。我想显示删除帐户按钮，只有当用户可以输入他们的电子邮件。

$(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");
}
});
});

.hide_del_button {
display: none;
}

<input type="text" disabled="" placeholder="[e-mail]" 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>

Answer 1

您的代码正在工作，但是您忘记了else语句。如果用户正确设置了一次，然后更改了它，它也会继续显示。

$(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");
}
});
});

.hide_del_button {
display: none;
}

<input type="text" disabled="" placeholder="[e-mail]" 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>

Answer 2

在您的实际代码中，您只在电子邮件正确时取消隐藏按钮，您必须添加else语句来再次隐藏按钮。但是有一个更有趣的方法那就是使用toggleClass函数。有关toggleClass函数的更多信息，请查看https://api.jquery.com/toggleclass/

所以你的js代码应该是这样的:

$(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();
$(".del_acount").toggleClass(
"hide_del_button", 
!(user_email == current_email))
});
});