我正在尝试将一个带有jQuery的类添加到我的代码中，但它不起作用。
我想为表单的前面几个步骤添加一个额外的类。我怎么能这样做？如果我在前面的步骤中输入addclass，只有按下上一个按钮才能看到它。
这是jQuery代码和HTML：
$(document).ready(function() {
var navListItems = $('div.setup-panel div a'),
allWells = $('.setup-content'),
allNextBtn = $('.nextBtn'),
allPrevBtn = $('.prevBtn');
allWells.hide();
navListItems.click(function(e) {
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this);
if (!$item.hasClass('disabled')) {
navListItems.removeClass('btn-primary').addClass('btn-next');
$item.addClass('btn-primary');
allWells.hide();
$target.show();
$target.find('input:eq(0)').focus();
}
});
allPrevBtn.click(function() {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");
prevStepWizard.removeAttr('disabled').trigger('click');
});
allNextBtn.click(function() {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
});
$('div.setup-panel div a.btn-primary').trigger('click');
});<!DOCTYPE html>
<html lang="de">
<head>
<title>leasing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/costum.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="stepwizard row col-md-12">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a href="#step-1" class="btn btn-primary"><i class="fab fa-font-awesome-flag"></i> Hey there!</a>
</div>
<div class="stepwizard-step">
<a href="#step-2" class="btn btn-default" disabled="disabled"><i class="fas fa-user"></i> Information</a>
</div>
<div class="stepwizard-step">
<a href="#step-3" class="btn btn-default" disabled="disabled"><i class="fas fa-store"></i> Store</a>
</div>
<div class="stepwizard-step">
<a href="#step-4" class="btn btn-default" disabled="disabled"><i class="fas fa-bicycle"></i> Bicycle</a>
</div>
<div class="stepwizard-step">
<a href="#step-5" class="btn btn-default" disabled="disabled"><i class="fas fa-user-shield"></i> Insurance</a>
</div>
<div class="stepwizard-step">
<a href="#step-6" class="btn btn-default" disabled="disabled"><i class="fas fa-user-shield"></i> Shipment</a>
</div>
</div>
</div>
<form class="leasingform col-md-10 col-xs-8" role="form" action="" method="post">
<div class="row setup-content" id="step-1">
<div class="col-12">
<div class="row">
<div class="welcome-text col-md-12">
<h3>Hey there and welcome,</h3>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lore</p>
</div>
<div class="form-group col-md-6">
<label class="control-label">First Name</label>
<input maxlength="100" required="required" class="form-control" placeholder="Enter First Name" type="text">
</div>
<div class="form-group col-md-6">
<label class="control-label">Last Name</label>
<input maxlength="100" required="required" class="form-control" placeholder="Enter Last Name" type="text">
</div>
<div class="col-md-12">
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
</div>
</div>
</div>
</div>
<div class="row setup-content" id="step-2">
<div class="col-xs-6 col-md-12">
<div class="col-md-12">
<div class="form-group col-md-12">
<label class="control-label">Address</label>
<textarea required="required" class="form-control" placeholder="Enter your address"></textarea>
</div>
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" required="required" class="form-control" placeholder="Enter Company Name" type="text">
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" required="required" class="form-control" placeholder="Enter Company Address" type="text">
</div>
<button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Previous</button>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-3">
<div class="col-xs-6 col-md-12">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" required="required" class="form-control" placeholder="Enter Company Name" type="text">
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" required="required" class="form-control" placeholder="Enter Company Address" type="text">
</div>
<button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Previous</button>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-4">
<div class="col-xs-6 col-md-12">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" required="required" class="form-control" placeholder="Enter Company Name" type="text">
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" required="required" class="form-control" placeholder="Enter Company Address" type="text">
</div>
<button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Previous</button>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-5">
<div class="col-xs-6 col-md-12">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">Company Name</label>
<input maxlength="200" required="required" class="form-control" placeholder="Enter Company Name" type="text">
</div>
<div class="form-group">
<label class="control-label">Company Address</label>
<input maxlength="200" required="required" class="form-control" placeholder="Enter Company Address" type="text">
</div>
<button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Previous</button>
<button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-6">
<div class="col-xs-6 col-md-12">
<div class="col-md-12">
<button class="btn btn-primary prevBtn btn-lg pull-left" type="button">Previous</button>
<button class="btn btn-success btn-lg pull-right" type="submit">Submit</button>
</div>
</div>
</div>
</form>
</div>
</body>
答案 0 :(得分：0)
要将新的css类添加到已单击的nextBtn，您可以调整相应的点击侦听器。以下示例在单击按钮并且所有验证都成功后添加了css-class step-done。
allNextBtn.click(function() {
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
/* ...your other code remains here... */
if (isValid) {
// Do the following to add a css-class to the last step button
$(this).addClass('step-done');
// Do the following to add a css-class to the div containing the last step
curStep.addClass('step-done');
nextStepWizard.removeAttr('disabled').trigger('click');
}
});
答案 1 :(得分：0)
好吧，我设法让它工作，就像我想要的那样。
我不得不接受
$('div.setup-panel div a[href="#' + curStepBtn + '"]')
并按照以下方式构建：
allPrevBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
prevStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");
$('div.setup-panel div a[href="#' + curStepBtn + '"]').removeClass('step-done');
prevStepWizard.removeAttr('disabled').trigger('click');
});
删除前面步骤的类。
添加它我按照这样管理它：
allNextBtn.click(function(){
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for(var i=0; i<curInputs.length; i++){
if (!curInputs[i].validity.valid){
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
$('div.setup-panel div a[href="#' + curStepBtn + '"]').addClass('step-done');
nextStepWizard.removeAttr('disabled').trigger('click');
});
感谢您的时间：）