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

问题描述 投票：0回答：1

我试图以多步形式理解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>

一旦我能够解决这个问题，那么我就可以继续理解其他问题。感谢您的任何帮助。

jquery
1个回答
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();

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.