jquery next()引用特定的ul的li

时间:2015-08-24 13:08:17

标签: javascript jquery html css

我正在制作一个多阶段表单,其中包含以下按钮,可以将表单提交从一个阶段转移到另一个阶段:

$("input[name='next']").click(function(){
    var output = validate();
    if(output) {
        var current = $("#signup-step.active");
        var next = current .next(); //Just use .next() here to get the nextSibling of this li
        if(next.length>0) {
            $("#"+current.attr("id")+"-field").hide();
            $("#"+next.attr("id")+"-field").show();
            $("input[name='back']").show();
            $("input[name='finish']").hide();
            $(".active").removeClass("active");
            next.addClass("active");
           /* if($(".active").attr("id") == $("#signup-step.li").last().attr("id")) {
                $("input[name='next']").hide();
                $("input[name='finish']").show();               
            } */

            if ( next.is(':last-child') ) {
                $("input[name='next']").hide();
                $("input[name='finish']").show(); 
            }
        }
    }
});

$("input[name='back']").click(function(){ 
    var current = $(".active");
    var prev = $(".active").prev("#signup-step.li");
    if(prev.length>0) {
        $("#"+current.attr("id")+"-field").hide();
        $("#"+prev.attr("id")+"-field").show();
        $("input[name='next']").show();
        $("input[name='finish']").hide();
        $(".active").removeClass("active");
        prev.addClass("active");
        /*if($(".active").attr("id") == $("#signup-step.li").first().attr("id")) {
            $("input[name='back']").hide();         
        }
        */

        if ( next.is(':last-child') ) {
                $("input[name='back']").hide();  
            }
    }
}); 

#signup-step:li我试图引用特定UL元素中的li元素,因为页面上还有另外两个UL元素:1)主菜单的UL,2)侧边栏的UL。现在由于主菜单的UL位于表单本身之前,下一个/后退按钮激活主菜单的菜单项而不是表单阶段。因此,能够指定UL引用将解决此问题。

请告知上面代码中选择#signup-step:li的正确选择?

以下是表格:

<ul id="signup-step">
    <li id="Initiate" class="active">Initiate</li>
    <li id="Strive">Strive</li>
    <li id="End">End</li>
</ul>

<form name="frmRegistration" id="signup-form" method="post" enctype="multipart/form-data" action="sendemail.php">

    <div id="initiate-field">

        <label>Name of Organization</label><span id="coyname-error" class="signup-error"></span>
        <div><input type="text" name="coyname" id="coyname" class="demoInputBox"/></div>
        <label>Certificate of Incorporation No.</label><span id="cacnum-error" class="signup-error"></span>
        <div><input type="text" name="cacnum" id="cacnum" class="demoInputBox"/></div>
        <label>Registered Office Address</label><span id="regofficeaddy-error" class="signup-error"></span>
        <div>

        <textarea  cols="30" rows="4" name="regofficeaddy" id="regofficeaddy"  class="demoInputBox" class = "max10"></textarea>

        </div>
        <label>Operations Address</label><span id="opsaddy-error" class="signup-error"></span>
        <div>

        <textarea  cols="30" rows="4" name="opsaddy" id="opsaddy"  class="demoInputBox" class = "max10"></textarea>

        </div>
</div>

<div id="strive-field" style="display:none;">
        <label>Location of workshop/facility if different from office address given in the Structure Section:</label><span id="facilityloc-error" class="signup-error"></span>
        <div>

        <textarea cols="60" rows="8" name="facilityloc" id="facilityloc"  class="demoInputBox" class = "max10"></textarea>


        </div>


        <label>Size of facility (in sq meters):</label><span id="facilitysize-error" class="signup-error"></span>
        <div><input type="text" name="facilitysize" id="facilitysize" class="demoInputBox"/></div>
        <label>Does your organization own or hire equipment:</label>
        <div>

        <input type="radio" name="facilityownhire" id="facilityownhire" value="Own"> Own
        <input type="radio" name="facilityownhire" id="facilityownhire" value="Hire"> Hire <span id="facilityownhire-error" class="signup-error"></span>

        </div>

</div>

<div id="end-field" style="display:none;">


        <label>Does your Organization have an HSE Manual?</label>
        <div>

        <input type="radio" name="hsemanual" id="hsemanual" value="Yes"> Yes
        <input type="radio" name="hsemanual" id="hsemanual" value="No"> No <span id="hsemanual-error" class="signup-error"></span>

        </div>

        <div id="hseevidenceBOX">
            <label>If yes, please attach evidence</label><span id="hseevidence-error" class="signup-error"></span>
            <div>   
            <input type="file" name="vendorfile[]"  id="hseevidence"  class="demoInputBox" />
            </div>
        </div>
        <label>Does your Organization have a Safety Policy?</label>
        <div>

        <input type="radio" name="orgsafepolicy" id="orgsafepolicy" value="Yes"> Yes
        <input type="radio" name="orgsafepolicy" id="orgsafepolicy" value="No"> No <span id="orgsafepolicy-error" class="signup-error"></span>

        </div>
</div>
<div>
        <input class="btnAction" type="button" name="back" id="back" value="Back" style="display:none;">
        <input class="btnAction" type="button" name="next" id="next" value="Next">
        <input class="btnAction" type="submit" name="finish" id="finish" value="Send" style="display:none;">
    </div>
</form>

0 个答案:

没有答案