添加class and/or 删除class 无效
Addclass and/or remove class not working
我正在尝试构建一个多阶段表单,连接到该表单的将是一个进度列表,其中将突出显示用户正在进行的步骤。然而,我在让 addClass 和 removeClass 函数工作时遇到了问题,我想知道这可能是什么错误。
请找到我正在处理的示例的 jsfiddle。
https://jsfiddle.net/yck3oae3/
<progress id="progressBar" value="0" max="100" style="width: 250px;"></progress>
<h3 id="status1" class="active">Select Tile Location</h3>
<h3 id="status2">Phase 2 of 3</h3>
<h3 id="status3">Phase 3 of 3</h3>
<form id="multiphase" onSubmit="return false">
<div id="phase1">
First Name: <input id="firstname" name="firstname"><br>
Last Name: <input id="lastname" name="lastname"><br>
<button onClick="processPhase1()">Next</button>
</div>
<div id="phase2">
Gender: <select id="gender" name="gender">
<option value=""></option>
<option value="m">Male</option>
<option value="f">Femaile</option>
</select>
<button onClick="processPhase2()">Continue</button>
</div>
<div id="phase3">
Country: <select id="country" name="country">
<option value="Narnia">Narnia</option>
<option value="Westeros">Westeros</option>
<option value="Mordor">Mordor</option>
</select>
<button onClick="processPhase3()">Continue</button>
</div>
<div id="show_all_data">
First Name: <span id="display_fname"></span><br>
Last Name: <span id="display_lname"></span><br>
Gender: <span id="display_gender"></span><br>
Country: <span id="display_country"></span><br>
<button onClick="submitForm()">Submit Data</button>
</div>
</form>
var fname, lname, gender, country;
function _(x){
return document.getElementById(x);
}
function processPhase1(){
fname = _("firstname").value;
lname = _("lastname").value;
if(fname.length > 2 && lname.length > 2){
_("phase1").style.display = "none";
_("phase2").style.display = "block";
_("progressBar").value = 33;
//_("status1").removeClass("active");
_("status2").addClass("active");
} else {
alert("Please fill in the fields");
}
}
function processPhase2() {
gender = _("gender").value;
if(gender.length > 0) {
_("phase2").style.display = "none";
_("phase3").style.display = "block";
_("progressBar").value = 66;
_("status2").style.background = "none";
_("status3").style.background = "blue";
}
else {
alert ("Please chose your gender");
}
}
function processPhase3() {
country = _("country").value;
if (country.length > 0) {
_("phase3").style.display = "none";
_("show_all_data").style.display = "block";
_("display_fname").innerHTML = fname;
}
else {
alert("Please chose your country");
}
}
function submitForm() {
_("multiphase").method = "post";
_("multiphase").action = "my_parser.php";
_("multiphase").submit();
}
addClass
和 removeClass
是 JQuery 函数,需要 JQuery 库。
$("#status1").removeClass("active");
$("#status2").addClass("active");
要在没有 JQuery 的情况下做到这一点,您可以做到
document.getElementById("whatever").className = "";
或者,更具体地回答您的问题:
_("status1").className = "active";
_("status2").className = "";
我正在尝试构建一个多阶段表单,连接到该表单的将是一个进度列表,其中将突出显示用户正在进行的步骤。然而,我在让 addClass 和 removeClass 函数工作时遇到了问题,我想知道这可能是什么错误。
请找到我正在处理的示例的 jsfiddle。
https://jsfiddle.net/yck3oae3/
<progress id="progressBar" value="0" max="100" style="width: 250px;"></progress>
<h3 id="status1" class="active">Select Tile Location</h3>
<h3 id="status2">Phase 2 of 3</h3>
<h3 id="status3">Phase 3 of 3</h3>
<form id="multiphase" onSubmit="return false">
<div id="phase1">
First Name: <input id="firstname" name="firstname"><br>
Last Name: <input id="lastname" name="lastname"><br>
<button onClick="processPhase1()">Next</button>
</div>
<div id="phase2">
Gender: <select id="gender" name="gender">
<option value=""></option>
<option value="m">Male</option>
<option value="f">Femaile</option>
</select>
<button onClick="processPhase2()">Continue</button>
</div>
<div id="phase3">
Country: <select id="country" name="country">
<option value="Narnia">Narnia</option>
<option value="Westeros">Westeros</option>
<option value="Mordor">Mordor</option>
</select>
<button onClick="processPhase3()">Continue</button>
</div>
<div id="show_all_data">
First Name: <span id="display_fname"></span><br>
Last Name: <span id="display_lname"></span><br>
Gender: <span id="display_gender"></span><br>
Country: <span id="display_country"></span><br>
<button onClick="submitForm()">Submit Data</button>
</div>
</form>
var fname, lname, gender, country;
function _(x){
return document.getElementById(x);
}
function processPhase1(){
fname = _("firstname").value;
lname = _("lastname").value;
if(fname.length > 2 && lname.length > 2){
_("phase1").style.display = "none";
_("phase2").style.display = "block";
_("progressBar").value = 33;
//_("status1").removeClass("active");
_("status2").addClass("active");
} else {
alert("Please fill in the fields");
}
}
function processPhase2() {
gender = _("gender").value;
if(gender.length > 0) {
_("phase2").style.display = "none";
_("phase3").style.display = "block";
_("progressBar").value = 66;
_("status2").style.background = "none";
_("status3").style.background = "blue";
}
else {
alert ("Please chose your gender");
}
}
function processPhase3() {
country = _("country").value;
if (country.length > 0) {
_("phase3").style.display = "none";
_("show_all_data").style.display = "block";
_("display_fname").innerHTML = fname;
}
else {
alert("Please chose your country");
}
}
function submitForm() {
_("multiphase").method = "post";
_("multiphase").action = "my_parser.php";
_("multiphase").submit();
}
addClass
和 removeClass
是 JQuery 函数,需要 JQuery 库。
$("#status1").removeClass("active");
$("#status2").addClass("active");
要在没有 JQuery 的情况下做到这一点,您可以做到
document.getElementById("whatever").className = "";
或者,更具体地回答您的问题:
_("status1").className = "active";
_("status2").className = "";