小贝子编程

单击当前按钮时无法设置计数器



我有5个步骤:Previous, Current &Next按钮和计数器在它下面。在Previous, Current &的帮助下，我能够向前和向后移动。下一个按钮。但是，我在柜台上遇到了问题。我认为步骤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>

您正在单击的当前按钮在您当前打开的活动字段集中，而不是value='3'字段集中。正在被单击的按钮的'this'上下文正在拉出在被隐藏之前可见的字段集的父字段集，而不是之后显示的字段集。

尝试传递next_step.attr('value')而不是$(this).parent("fieldset").attr('value')

以下是最终代码:

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 = next_step.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 python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium