【发布时间】：2020-12-31 03:50:54
【问题描述】：
我有一个向导，我正在尝试创建一个进度条。用户所在的步骤应该是紫色的，并且应该随着用户在表单中的进展而继续。当我尝试进入下一步时，进度条显示我在最后一步，而不是我当前所在的步骤。
这是我的标记：
<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");找到下一步
这会不断让进度条告诉我我已完成最后一步。如何让它识别下一步？
【问题讨论】：
-
你能在小提琴中创建你的代码吗
-
可以添加完整的html结构吗？
-
当然，我会用完整的 html 做一个小提琴
-
jsfiddle.net/cyh9odt6/3 这是我的小提琴。出于某种原因，它一直说没有定义验证器？在 Visual Studio 中，我的代码工作正常，除了进度条的问题
标签： javascript html jquery wizard