我正在为我的JavaScript / Jquery类分配作业。我有一个电子邮件输入表格。我需要将一个事件处理程序添加到“清除条目”按钮，还将星号添加回到表单字段末尾的跨度。
这是我的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Join Email List</title>
<link rel="stylesheet" href="email_list.css">
<script src="jquery.js"></script>
<script src="email_list.js"></script>
</head>
<body>
<section>
<h1>Please join our email list</h1>
<form id="email_form" name="email_form" action="join.html" method="get">
<label for="email_address1">Email Address:</label>
<input type="text" id="email_address1">
<span id="email_address1_error">*</span><br>
<label for="email_address2">Re-enter Email Address:</label>
<input type="text" id="email_address2">
<span id="email_address2_error">*</span><br>
<label for="first_name">First Name:</label>
<input type="text" id="first_name">
<span id="first_name_error">*</span><br>
<label> </label>
<input type="button" id="join_list" value="Join our List"><br>
<label> </label>
<input type="button" id="clear_entries" value="Clear Entries">
</form>
</section>
</body>
</html>
这是Jquery：
$(document).ready(function() {
$("#join_list").click(
function() {
var emailAddress1 = $("#email_address1").val();
var emailAddress2 = $("#email_address2").val();
var isValid = true;
// validate the first email address
if (emailAddress1 == "") {
$("#email_address1").next().text("This field is required.");
isValid = false;
} else {
$("#email_address1").next().text("");
}
// validate the second email address
if (emailAddress2 == "") {
$("#email_address2_error").text("This field is required.");
isValid = false;
} else if (emailAddress1 !== emailAddress2) {
$("#email_address2").next().text("This entry must equal first entry.");
isValid = false;
} else {
$("#email_address2").next().text("");
}
// validate the first name entry
if ($("#first_name").val() == "") {
$("#first_name").next().text("This field is required.");
isValid = false;
}
else {
$("#first_name").next().text("");
}
// submit the form if all entries are valid
if (isValid) {
$("#email_form").submit();
}
} // end function
); // end click
//on-click event to clear out all text boxes
$("#clear_entries").click (
function () {
$("input[type=text]").each(function () {
$(this).val(" ");
});
$("#email_address1_error").next().text("*"); $("#email_address2_error").next().text("*");$("#first_name_error").next().text("*");
});
//
$("#email_address1").focus();
}); // end ready
指令说，添加星号可以在一个语句中完成。
这就是我使用的“ $（”＃email_address1_error“）。next（）。text（”“）; $（”＃email_address2_error“）。next（）。text（”“）; $（”＃first_name_error“）。 next（）。text（“ *”）;“。
没有错误消息可以告诉我什么地方出了问题，但是星号没有显示出来，因此我编写该语句的方式有些错误。应该怎么做？
最佳答案
您将错误跨度ID用作选择器，然后调用next（）。只需删除.next（）。
即。更改
$("#email_address1_error").next().text("*"); $("#email_address2_error").next().text("*");$("#first_name_error").next().text("*");
至
$("#email_address1_error").text("*"); $("#email_address2_error").text("*");$("#first_name_error").text("*");
和瞧！