【发布时间】：2021-11-01 04:36:03
【问题描述】：
我有 5 个步骤，其中包含上一个、当前和下一个按钮以及它下面的计数器。我可以在上一个、当前和下一个按钮的帮助下向前和向后移动。但是，我在柜台面临问题。我正在考虑步骤 3 是当前步骤。当我单击“当前”按钮时，我可以返回到第 3 步，但计数器没有达到 3，而是采用最后一步编号。请检查代码并帮助我解决问题。
var current = 1,
current_step, next_step, steps;
steps = $("fieldset").length;
var fieldset_count = steps.current;
if (current == '1') {
// $('#first-step a').add('disabled');
$('#first-step a.previous').prop('disabled', true);
};
if ($('fieldset').hasClass('last-step')) {
$('#last-step a.next').prop('disabled', true);
}
$(".next").on("click", function () {
current_step = $(this).parent("fieldset");
next_step = $(this).parent("fieldset").next();
next_step.show();
current_step.hide();
$('.counter-step').html(function (i, val) {
return val * 1 + 1
});
});
$(".previous").on("click", function () {
current_step = $(this).parent("fieldset");
next_step = $(this).parent("fieldset").prev();
next_step.show();
current_step.hide();
$('.counter-step').html(function (i, val) {
return val * 1 - 1
});
});
// Current button functionality
$(".current").on("click",function(){
current_step = $(this).parent("fieldset");
next_step = $("#current-step");
next_step.show();
current_step.hide();
var current_counter = $(this).parent("fieldset").attr('value');
$('.counter-step').text(current_counter);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="/css/icofont/icofont.min.css">
</head>
<style>
.container fieldset:not(:first-of-type) {
display: none;
}
</style>
<body>
<div class="container">
<fieldset id="first-step" value="1">
<h4 class="mb-3 header">Step-1</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<fieldset value="2">
<h4 class="mb-3 header">Step-2</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<fieldset value="3" id="current-step">
<h4 class="mb-3 header">Step-3</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<fieldset value="4" >
<h4 class="mb-3 header">Step-4</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<fieldset class="last-step" id="last-step" value="4">
<h4 class="mb-3 header">Step-5</h4>
<a type="button" name="previous" class="previous btn btn-secondary" value="Previous">Previous</a>
<a type="button" name="current" class="current btn btn-success" value="Current">Current</a>
<a type="button" name="next" class="next btn btn-primary" value="Next">Next</a>
</fieldset>
<p>Viewing Step <span class="counter-step">1</span> of <span class="final-step">23</span></p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous">
</script>
</body>
</html>【问题讨论】：
标签： javascript html jquery css bootstrap-4