Я создал новую скрипку, основанную на твоей.
https://jsfiddle.net/5o0g43k7/
Я добавил классы кнопок шага 3 и шага 4 и добавил к ним события щелчков, которые выполняют логику, аналогичную вашим следующим и предыдущим событиям щелчков.
<input type="button" name="step3" class=" btn btn-default step-3" value="Step 3" />
<input type="button" name="step4" class=" btn btn-primary step-4" value="Step 4" />
Я использую closest () вместо parent (), который будет искать первого родителя, который является «fieldset», так что вы можете поместить эти кнопки step-3 и step-4 в любое место fieldset и не нужно изменятьэтот кодЧтобы получить next_step, я просто выбираю элемент с идентификатором «step3», так как я видел, что у вас уже есть атрибуты id для этих наборов полей.
$(document).on("click",".step-3",function(){
current_step = $(this).closest("fieldset");
next_step = $("#step3");
next_step.show();
current_step.hide();
//setProgressBar(--current);
});
$(document).on("click",".step-4",function(){
current_step = $(this).closest("fieldset");
next_step = $("#step4");
next_step.show();
current_step.hide();
//setProgressBar(--current);
});
Очевидно, что если вам нужно пропустить шаги, основанные на вводе пользователя, я предполагаю, что вы 'Я проверю этот ввод, когда они нажмут Далее, а затем нужно будет пропустить ... так что это будет немного иначе, но логика, чтобы скрыть текущий шаг и показать следующий шаг, должна быть такой же.
Я надеюсь, что этопомогает вам.
Редактировать: добавить логику для хранения шагов в массиве и перейти к следующему или предыдущему шагу на основе массива.
Приведенный ниже фрагмент будет имитировать необходимостьпропустить Шаг 3. Он работает путем удаления 3 из массива stepIds.Эту логику можно использовать, сначала инициализируя пошаговые идентификаторы со всеми шагами (1-5), а затем на основе пользовательского ввода, удаляя шаги из массива или вставляя их обратно в правильное местоположение, сохраняя порядок сортировки.
I wasnНе уверены, что вам действительно нужны кнопки «Шаг 3» и «Шаг 4».Я удалил кнопку Шаг 3 в моем примере.Если вы собираетесь использовать их в своей законченной логике, вам также нужно показать и скрыть эти кнопки, а также добавить и удалить идентификатор шага из массива stepIds.
var stepIds = [1, 2, 4, 5 ]
$(document).ready(function(){
var current = 1,current_step,next_step,steps;
steps = $("fieldset").length;
//$(".next").click(function(){
$(document).on("click",".next",function(){
current_step = $(this).closest("fieldset").data("id");
next_step = stepIds[stepIds.indexOf(current_step)+1];
$('fieldset[data-id="' + current_step + '"]').hide();
$('fieldset[data-id="' + next_step + '"]').show();
});
$(document).on("click",".previous",function(){
current_step = $(this).closest("fieldset").data("id");
next_step = stepIds[stepIds.indexOf(current_step)-1];
$('fieldset[data-id="' + current_step + '"]').hide();
$('fieldset[data-id="' + next_step + '"]').show();
});
$(document).on("click",".step-3",function(){
current_step = $(this).closest("fieldset").data("id");
next_step = stepIds[stepIds.indexOf(3)];
if (next_step) {
$('fieldset[data-id="' + current_step + '"]').hide();
$('fieldset[data-id="' + next_step + '"]').show();
}
});
$(document).on("click",".step-4",function(){
current_step = $(this).closest("fieldset").data("id");
next_step = stepIds[stepIds.indexOf(4)];
if (next_step) {
$('fieldset[data-id="' + current_step + '"]').hide();
$('fieldset[data-id="' + next_step + '"]').show();
}
});
});
form#applicationForm fieldset:not(:first-of-type), #plotTable {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="py-5 text-center">
<h2>Application form</h2>
</div>
<div class="row">
<div class="col-md-12">
<form id="applicationForm" class="needs-validation" novalidate>
<fieldset data-id="1">
<h4 class="mb-3">Site Details</h4>
<div class="row">
<div class="col-md-6 mb-3">
<label for="clientName">Name</label>
<input type="text" class="form-control" id="clientName" placeholder="" value="" required>
<div class="invalid-feedback">
Valid Name is required.
</div>
</div>
</div>
<div class="mb-3 mt-4">
<label for="address">Address</label>
<input type="text" class="form-control" id="address" required>
<div class="invalid-feedback">
Please enter site address.
</div>
</div>
<div class="mb-3">
<label for="address2">Address <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="address2">
</div>
<div class="row">
<div class="col-md-4 mb-3">
<label for="town">Town</label>
<input type="text" class="form-control" id="town" required>
<div class="invalid-feedback">
Town is required.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="county">County</label>
<input type="text" class="form-control" id="county" required>
<div class="invalid-feedback">
County is required.
</div>
</div>
<div class="col-md-4 mb-3">
<label for="postcode">Post Code</label>
<input type="text" class="form-control" id="postcode" placeholder="" required>
<div class="invalid-feedback">
Post Code is required.
</div>
</div>
</div>
<hr class="mb-4">
<input type="button" name="password" class="next btn btn-primary" value="Next" />
</fieldset>
<fieldset data-id="2">
<h4 class="mb-3">Description</h4>
<div class="row">
<div class="col-md-12 mb-3">
<label for="localAuthority">Description </label>
<textarea maxlength="100" class="form-control" id="localAuthoirty"></textarea>
</div>
</div>
<div class="row">
<input type="button" name="step4" class=" btn btn-primary step-4" value="Step 4" />
</div>
<hr class="mb-4">
<input type="button" name="previous" class="previous btn btn-default" value="Previous" />
<input type="button" name="next" class="next btn btn-primary" value="Next" />
</fieldset>
<fieldset id="step3" data-id="3">
<h4 class="mb-3">Step 3</h4>
<div class="row">
<div class="col-md-12 mb-3">
This is step 3
</div>
</div>
<hr class="mb-4">
<input type="button" name="previous" class="previous btn btn-default" value="Previous" />
<input type="button" name="next" class="next btn btn-primary" value="Next" />
</fieldset>
<fieldset id="step4" data-id="4">
<h4 class="mb-3">Step 4</h4>
<div class="row">
<div class="col-md-12 mb-3">
This is step 4
</div>
</div>
<hr class="mb-4">
<input type="button" name="previous" class="previous btn btn-default" value="Previous" />
<input type="button" name="next" class="next btn btn-primary" value="Next" />
</fieldset>
<fieldset id="terms" data-id="5">
<h4 class="mb-3">Final Step of the form</h4>
<p>All routes lead to this final step</p>
</fieldset>
</form>
</div>
</div>
</div>