Question

我正在尝试构建一个多阶段表单，连接到该表单将是一个进度列表，其中将突出显示用户所在的步骤。然而，我遇到了让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();
}

Answer 1

addClass和removeClass是JQuery函数，需要JQuery库。

$("#status1").removeClass("active");
$("#status2").addClass("active");

JSFiddle

要在没有JQuery的情况下执行此操作，您可以

document.getElementById("whatever").className = "";

或者，更具体的答案：

_("status1").className = "active";
_("status2").className = "";

Other JSfiddle

Addclass和/或删除类不起作用

1 个答案: