如何解决尝试获取具有特定类名称的下一个div,但我一直获取最后一个div
我有一个向导,正在尝试创建进度条。用户所在的步骤应为紫色,并应随着用户处理表单的进行而继续。当我尝试进行下一步时,进度条显示即时消息位于最后一步,而不是我当前正在执行的步骤。
这是我的标记:
<div class="wizard-step">
<div class="row">
<div class="card shadow mb-4 w-100">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Payment</h6>
</div>
<div class="card-body">
<row>
<div class="form-group">
<label for="plan" class="control-label">Select a Plan</label><br />
@Html.DropDownListFor(model => model.planid,Model.subscriptionTypes,"None",new { @id = "plan",@class = "form-control" })
@Html.ValidationMessageFor(model => model.planid,"",new { @class = "text-danger" })
</div>
<div class="form-group">
<label for="card-number">
Credit or debit card
</label>
<div id="card-number">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="card-vc">
CVC
</label>
<div id="card-cvc">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
<div class="col-md-6">
<label for="card-expiration">
Exp
</label>
<div id="card-expiration">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
</div>
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
</div>
</div>
</div>
这是我的Javascript:
$(function () {
$(".wizard-step:first").fadeIn(); // show first step
// attach backStep button handler
// hide on first step
$("#back-step").hide().click(function () {
var $step = $(".wizard-step:visible"); // get current step
if ($step.prev().hasClass("wizard-step")) { // is there any prevIoUs step?
$step.hide().prev().fadeIn(); // show it and hide current step
// disable backstep button?
if (!$step.prev().prev().hasClass("wizard-step")) {
$("#back-step").hide();
}
}
});
// attach nextStep button handler
$("#next-step").click(function () {
var $step = $(".wizard-step:visible"); // get current step
var validator = $("form").validate(); // obtain validator
var anyError = false;
$step.find("input").each(function () {
if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}
next_fs = $(this).parent().next().find(".wizard-step");
$("#progressbar li").eq($(".wizard-step").index(next_fs)).addClass("active");
});
if (anyError)
return false; // exit if any error found
if ($step.next().hasClass("confirm")) { // is it confirmation?
// show confirmation asynchronously
$.post("/wizard/confirm",$("form").serialize(),function (r) {
// inject response in confirmation step
$(".wizard-step.confirm").html(r);
});
}
if ($step.next().hasClass("wizard-step")) { // is there any next step?
$step.hide().next().fadeIn(); // show it and hide current step
$("#back-step").show(); // recall to show backStep button
}
else { // this is last step,submit form
$("form").submit();
}
});
});
我正在尝试通过执行此操作var next_fs = $(this).parent().next().find(".wizard-step"); $("#progressbar li").eq($(".wizard-step").index(next_fs)).addClass("active");
这总是使进度条向我显示我已进入最后一步。我如何才能识别下一步?
这是一张显示问题的图片。前两个步骤应该亮起(设置为活动状态),而只是设置第一个和最后一个活动状态
解决方法
您只需在全局声明一个变量即可解决此问题,该索引将显示 current div索引,因此只要单击next
按钮,只需将其递增然后,将其值传递给eq(count)
以显示下一个div,也可以对后退按钮执行相同的操作。此外,根据需要修改以下代码。
演示代码 :
$(function() {
var index = 0; //delcare this
$(".wizard-step:first").fadeIn(); // show first step
$("#back-step").hide().click(function() {
$("#progressbar li").eq(index).removeClass("active"); //remove active class when backbutton on curent wizard
index--; //decrement value
var $step = $(".wizard-step:visible");
if ($step.prev().hasClass("wizard-step")) {
$step.hide().prev().fadeIn();
if (!$step.prev().prev().hasClass("wizard-step")) {
$("#back-step").hide();
}
}
});
// attach nextStep button handler
$("#next-step").click(function() {
index++; //increment
var $step = $(".wizard-step:visible"); // get current ste
var anyError = false;
$step.find("input").each(function() {
/*if (!validator.element(this)) { // validate every input element inside this step
anyError = true;
}*/
});
if (anyError)
return false; // exit if any error found
if ($step.next().hasClass("confirm")) { // is it confirmation?
// show confirmation asynchronously
$.post("/wizard/confirm",$("form").serialize(),function(r) {
// inject response in confirmation step
$(".wizard-step.confirm").html(r);
});
}
if ($step.next().hasClass("wizard-step")) {
$step.hide().next().fadeIn();
//add active class to current div
$("#progressbar li").eq(index).addClass("active");
$("#back-step").show(); // recall to show backStep button
} else { // this is last step,submit form
$("form").submit();
}
});
});
.wizard-step {
display: none;
}
#progressbar {
text-align: center;
position: relative;
margin-bottom: 30px;
overflow: hidden;
color: lightgrey;
z-index: 0;
}
#progressbar .active {
color: #673AB7
}
#progressbar li {
list-style-type: none;
font-size: 15px;
width: 25%;
float: left;
position: relative;
font-weight: 400
}
#progressbar #account:before {
font-family: FontAwesome;
content: "\f13e"
}
#progressbar #personal:before {
font-family: FontAwesome;
content: "\f007"
}
#progressbar #payment:before {
font-family: FontAwesome;
content: "\f030"
}
#progressbar #confirm:before {
font-family: FontAwesome;
content: "\f00c"
}
#progressbar li:before {
width: 50px;
height: 50px;
line-height: 45px;
display: block;
font-size: 20px;
color: #ffffff;
background: lightgray;
border-radius: 50%;
margin: 0 auto 10px auto;
padding: 2px
}
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: lightgray;
position: absolute;
left: 0;
top: 25px;
z-index: -1
}
#progressbar li.active:before,#progressbar li.active:after {
background: #673AB7
}
.progress {
height: 20px
}
.progress-bar {
background-color: #673AB7
}
.fit-image {
width: 100%;
object-fit: cover
}
.StripeElement {
box-sizing: border-box;
height: 40px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: 4px;
background-color: white;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}
.green {
border: solid green 1px;
}
.error {
border: solid red 1px;
}
.select2-container--default .select2-selection--single {
border: 1px solid #ccc !important;
border-radius: 4px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 1.428571429 !important;
padding: 6px 12px !important;
}
.select2-container .select2-selection--single {
height: 34px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
margin-top: 0;
}
.validation-summary-valid {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<h2>Create</h2>
<body>
<form id="payment-form">
<div class="form-horizontal">
<h4>LoginSecurityQuestionsViewModel</h4>
<hr />
<div class="container">
<!-- progressbar -->
<ul id="progressbar">
<li class="active" id="account"><strong>Account</strong></li>
<li id="personal"><strong>Personal</strong></li>
<li id="payment"><strong>Image</strong></li>
<li id="confirm"><strong>Finish</strong></li>
</ul>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div> <br>
<!-- fieldsets -->
<div class="wizard-step">
<div class="row">
<div class="card shadow mb-4 w-100">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Personal Information</h6>
</div>
<div class="card-body">
<div class="row">
<div class="form-group col-md-6">
<label class="control-label">First Name</label>
<input type="text" class="form-control" name="First Name" id="fName" />
<div class="form-group col-md-6">
<label class="control-label">Last Name</label>
<input type="text" class="form-control" name="Last Name" id="lName" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Company</label>
<input type="text" class="form-control" name="Company" id="company" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">E-mail</label>
<input type="text" class="form-control" name="Email" id="email" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wizard-step">
<div class="row">
<div class="card shadow mb-4 w-100">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Security</h6>
</div>
<div class="card-body">
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Password</label>
<input type="password" class="form-control" name="Password" Name id="password" />
<ul class="form-text text-muted">
<li>Must be 8-20 characters long</li>
<li>Must contain at least 1 number</li>
<li>Must contain at least 1 uppercase letter</li>
<li>Must contain at least 1 lowercase letter </li>
<li>Must contain a special character (e.g. ! ; # * %)</li>
</ul>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Confirm Password</label>
<input type="password" class="form-control" name="Confirm Password" id="cnfPassword" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wizard-step">
<div class="row">
<div class="card shadow mb-4 w-100">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Affiliation</h6>
</div>
<div class="card-body">
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Church Affiliation 1</label><br />
<input type="text" class="form-control" name="Affiliation" Name id="affiliation1" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Church Affiliation 2</label><br />
<input type="text" class="form-control" name="Affiliation2" Name id="affiliation2" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Church Affiliation 3</label><br />
<input type="text" class="form-control" name="Affiliation3" Name id="affiliation3" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label">Church Affiliation 4</label><br />
<input type="text" class="form-control" name="Affiliation4" Name id="affiliation4" />
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wizard-step">
<div class="row">
<div class="card shadow mb-4 w-100">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Payment</h6>
</div>
<div class="card-body">
<row>
<div class="form-group">
<label for="card-number">
Credit or debit card
</label>
<div id="card-number">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-md-6">
<label for="card-vc">
CVC
</label>
<div id="card-cvc">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
<div class="col-md-6">
<label for="card-expiration">
Exp
</label>
<div id="card-expiration">
<!-- A Stripe Element will be inserted here. -->
</div>
</div>
</div>
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
</div>
</div>
</div>
<p>
<input type="button" id="back-step" name="back-step" value="< Back" />
<input type="button" id="next-step" name="next-step" value="Next >" />
</p>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。