jQuery-通过多步表单导航的最佳方法是什么

时间：2019-03-29 20:02:43

标签： jquery

我试图以多步形式理解jquery的使用。我正在使用上一个和下一个按钮进行导航。功能很好用，但是布局需要一些调整。我需要访问该字段集才能使导航正常工作。如果我在按钮周围放置一个包含div的元素，那么jquery函数将定位到错误的父对象。这是代码示例。

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	next_fs = $(this).parent().next();

    //activate next step on progressbar using the index of next_fs
	$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
	
	//show the next fieldset
    next_fs.show(); 
    current_fs.hide();
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale current_fs down to 80%
			scale = 1 - (1 - now) * 0.2;
			//2. bring next_fs from the right(50%)
			left = (now * 50)+"%";
			//3. increase opacity of next_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({'transform': 'scale('+scale+')'});
			next_fs.css({'left': left, 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

$(".previous").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	previous_fs = $(this).parent().prev();
	
	//de-activate current step on progressbar
	$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
	
	//show the previous fieldset
    previous_fs.show(); 
    current_fs.hide();
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale previous_fs from 80% to 100%
			scale = 0.8 + (1 - now) * 0.2;
			//2. take current_fs to the right(50%) - from 0%
			left = ((1-now) * 50)+"%";
			//3. increase opacity of previous_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({'left': left});
			previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

$(".submit").click(function(){
	return false;
})
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/*basic reset*/
* {
    margin: 0;
    padding: 0;
}

form {
    display: flex;
    justify-content: center;
}

.form {
    box-sizing: content-box;
    background: #ffffff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .4);
    margin: 4em;
    padding: 1em;
    display: flex;
    flex-direction: column;
    width: 50rem;
    justify-content: center;
    background-image: url('../../img/globe.png');
    background-repeat: no-repeat;
    background-size: 50rem;
    background-position: center;
}

.form fieldset {
    border: 0 none;
    border-radius: 3px;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    height: 300px;
    /*stacking fieldsets above each other*/
}
    /*Hide all except first fieldset*/
    .form fieldset:not(:first-of-type) {
        display: none;
    }
/*buttons*/
.form .action-button {
    width: 100px;
    background: #27AE60;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
    display: inline;
}

    .form .action-button:hover, .form .action-button:focus {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

.fs-title {
    font-size: 15px;
    text-transform: uppercase;
    color: #2C3E50;
    margin-bottom: 10px;
}

.fs-subtitle {
    font-weight: normal;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}

/*progressbar*/
#progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    /*CSS counters to number the steps*/
    counter-reset: step;
    box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
}

#progressbar li {
	list-style-type: none;
	color: black;
	text-transform: uppercase;
	font-size: 9px;
	width: 25%;
	float: left;
	position: relative;
    text-align: center;
    z-index: 5;
    font-weight: bold;
}

#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 12px;
	color: black;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}

/*progressbar connectors*/
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: 0; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
	/*connector not needed before the first step*/
	content: none; 
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}  

section {
    display: flex;
    white-space: nowrap;
    padding: .4em;
    justify-content: flex-end;
}

.flexStart {
    justify-content: flex-start;
}
.flexStart input {
    flex: 2;
}

.flexStart label {
    flex:1;
}

section span {
    display: flex;
    padding: 1em 0 0;
}

label {
    padding: .4em;
    font-weight: bold;
}

select {
    display: block;
    padding: .4em;
}

input {
    display: block;
    padding: .4em;
    border: 1px solid #aaaaaa;
}

button {
    background-color: #0cc39f;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    font-weight: 700;
    margin: 1em 0 0 0;
    padding: 1em;
}

    button:hover {
        opacity: 0.8;
    }
@media only screen and (max-width: 768px) {
    section, section span {
        flex-direction: column;
    }
    .form fieldset {
        height: auto;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
            <!-- progressbar -->
            <ul id="progressbar">
                <li class="active">General Info</li>
                <li>Shipping Info</li>
                <li>Contact Info</li>
                <li>Misc.</li>
            </ul>
            <!-- fieldsets -->
            <fieldset class="tab" id="1">
                <h4>General Info</h4>
                <section class="flexStart">
                    <label>First Name:</label>
                    <asp:TextBox ID="FirstNameTextBox" runat="server" placeholder="First Name" />
                    <label>Last Name:</label>
                    <asp:TextBox ID="LastNameTextBox" runat="server" placeholder="Last Name" />
                </section>
                <section class="flexStart">
                    <label>Address:</label>
                    <asp:TextBox ID="AddressTextBox" runat="server" placeholder="Address" />
                </section>
                <section class="flexStart">
                    <label>Address2:</label>
                    <asp:TextBox ID="Address2TextBox" runat="server" placeholder="Address2" />
                </section>
                <section class="flexStart">
                    <label>City:</label>
                    <asp:TextBox ID="CityTextBox" runat="server" placeholder="City" />
                    <label>State:</label>
                    <asp:DropDownList ID="ddlState" runat="server" DataTextField="locName" DataValueField="locState"
                        DataSourceID="StateDataSource" AppendDataBoundItems="True">
                        <asp:ListItem Text="<-- Choose State -->" Value=""></asp:ListItem>
                    </asp:DropDownList>
                    <asp:ObjectDataSource ID="StateDataSource" runat="server" OldValuesParameterFormatString="{0}"
                        SelectMethod="getStates" TypeName="StatesBLLWithSProcs"></asp:ObjectDataSource>
                    <label>Zip Code:</label>
                    <asp:TextBox ID="ZipCodeTextBox" runat="server" placeholder="Zip Code" />
                </section>
                <section class="flexStart">
                    <label>Country:</label>
                    <asp:DropDownList ID="ddlCountry" runat="server" AppendDataBoundItems="True" DataSourceID="CountryDataSource"
                        DataTextField="locName" DataValueField="locCountry">
                        <asp:ListItem Text="<-- Choose Country -->" Value=""></asp:ListItem>
                    </asp:DropDownList>
                    <asp:ObjectDataSource ID="CountryDataSource" runat="server" OldValuesParameterFormatString="{0}"
                        SelectMethod="GetCountries" TypeName="CountryBLLWithSProcs"></asp:ObjectDataSource>
                </section>
                <button type="button" name="next" class="next action-button">Next</button>
            </fieldset>
            <fieldset class="tab" id="2">
                <h4 class="fs-title">Shipping Info</h4>
                <section class="flexStart">
                    <label>First Name:</label>
                    <asp:TextBox ID="ShippingFirstNameTextBox" runat="server" placeholder="First Name" />
                    <label>Last Name:</label>
                    <asp:TextBox ID="ShippingLastNameTextBox" runat="server" placeholder="Last Name" />
                </section>
                <section class="flexStart">
                    <label>Address:</label>
                    <asp:TextBox ID="ShippingAddressTextBox" runat="server" placeholder="Shipping Address" />
                </section>
                <section class="flexStart">
                    <label>Address2:</label>
                    <asp:TextBox ID="ShippingAddress2TextBox" runat="server" placeholder="Shipping Address2" />
                </section>
                <section class="flexStart">
                    <label>City:</label>
                    <asp:TextBox ID="ShippingCityTextBox" runat="server" placeholder="Shipping City" />
                    <label>State:</label>
                    <asp:DropDownList ID="ddlShippingState" runat="server" DataTextField="locName" DataValueField="locState"
                        DataSourceID="ShippingStateDataSource" AppendDataBoundItems="true">
                        <asp:ListItem Text="<-- Choose State -->" Value=""></asp:ListItem>
                    </asp:DropDownList>
                    <asp:ObjectDataSource ID="ShippingStateDataSource" runat="server" OldValuesParameterFormatString="{0}" SelectMethod="getStates" TypeName="StatesBLLWithSProcs"></asp:ObjectDataSource>
                    <label>Zip Code:</label>
                    <asp:TextBox ID="ShippingZipTextBox" runat="server" placeholder="Shipping Zip Code" />
                </section>
                <section class="flexStart">
                    <label>Country:</label>
                    <asp:DropDownList ID="ddlShippingCountry" runat="server" AppendDataBoundItems="true" DataSourceID="ShippingCountryDataSource"
                        DataTextField="locName" DataValueField="locCountry">
                        <asp:ListItem Text="<-- Choose Country -->" Value=""></asp:ListItem>
                    </asp:DropDownList>
                    <asp:ObjectDataSource ID="ShippingCountryDataSource" runat="server" OldValuesParameterFormatString="{0}"
                        SelectMethod="GetCountries" TypeName="CountryBLLWithSProcs"></asp:ObjectDataSource>
                </section>
                <button type="button" name="previous" class="previous action-button">Previous</button>
                <button type="button" name="next" class="next action-button">Next</button>
            </fieldset>
            <fieldset class="tab phoneSection" id="3">
                <h4 class="fs-title">Phone Information</h4>
                <section>
                    <label for="CellPhoneTextBox">CellPhone:</label>
                    <asp:TextBox ID="CellPhoneTextBox" runat="server" />
                    <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender1" runat="server" Mask="(999) 999-9999"
                        TargetControlID="CellPhoneTextBox" ClearMaskOnLostFocus="false" />
                </section>
                <section>
                    <label for="PhoneTextBox">Phone:</label>
                    <asp:TextBox ID="PhoneTextBox" ClientIDMode="static" runat="server" />
                    <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender2" runat="server" Mask="(999) 999-9999"
                        TargetControlID="PhoneTextBox" ClearMaskOnLostFocus="false" />
                </section>
                <section>
                    <label for="ShippingPhoneTextBox">Shipping Phone:</label>
                    <asp:TextBox ID="ShippingPhoneTextBox" runat="server" />
                    <ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender3" runat="server" Mask="(999) 999-9999"
                        TargetControlID="ShippingPhoneTextBox" ClearMaskOnLostFocus="false" />
                </section>
                <button type="button" name="previous" class="previous action-button">Previous</button>
                <button type="button" name="next" class="next action-button">Next</button>
            </fieldset>
            <fieldset class="tab phoneSection" id="4">
                <h4 class="fs-title">Misc.</h4>
                <section>
                    <label>Member website:</label>
                    <asp:TextBox ID="CustomerWebsiteTextBox" runat="server" />
                </section>
                <section>
                    <label>PayPal Info:</label>
                    <asp:TextBox ID="PayPalInfoTextBox" runat="server" />
                </section>
                <section>
                    <label>FutureMail:</label>
                    <asp:DropDownList ID="ddlFutureMail" runat="server" AppendDataBoundItems="true" DataSourceID="ActiveDS"
                        DataTextField="Description" DataValueField="Description">
                        <asp:ListItem Text="<-- Choose Active Status -->" Value=""></asp:ListItem>
                    </asp:DropDownList>
                    <asp:ObjectDataSource ID="ActiveDS" runat="server" OldValuesParameterFormatString="{0}"
                        SelectMethod="GetYesNo" TypeName="BrewerianaWithSprocsTableAdapters.LookupYesNoTableAdapter"></asp:ObjectDataSource>
                </section>
                <button type="button" name="previous" class="previous action-button">Previous</button>
                <button type="submit" name="submit" class="submit action-button">Submit</button>
            </fieldset>
        </div>

一旦我可以解决这个问题，那么我就可以努力理解其他事情。谢谢您的帮助。

1 个答案:

答案 0 :(得分：0)

我设法通过在两个函数中都更改了此位代码来解决了这个问题。

current_fs = $(this).parent();

至（下一个功能）

current_fs = $(this).parent();
current_fs = current_fs.parent();
next_fs = current_fs.next();

和（上一个功能）

current_fs = $(this).parent();
current_fs = current_fs.parent();
previous_fs =current_fs.prev();

这可能不是实现此目的的最佳方法，但是它确实使我能够将按钮包装在容器中，以将它们放置在所需的位置。希望有人觉得这有用。

相关问题
最新问题