Improve Jquery code implementation

Question

I'm working with jquery and this code is working but I wanto to improve it because I'm not re-using code. Theres a way to dinamically sent $("#btn_step1") changing the number oh the step?

$( document ).ready(function() {
 var activeDiv = $("#mod_formSteps-1");
 var body = $("html, body");
 activeDiv.siblings().hide();
 $("#btn_step1").on("click", function( event ){
 event.preventDefault();
 activeDiv.hide();
 activeDiv.next().show();
 activeDiv = $("#mod_formSteps-2");
 body.animate({scrollTop:0}, '500', 'swing');
 });
 $("#btn_step2").on("click", function( event ){
 event.preventDefault();
 activeDiv.hide();
 activeDiv.next().show();
 activeDiv = $("#mod_formSteps-3");
 body.animate({scrollTop:0}, '500', 'swing');
 });
 $("#btn_step3").on("click", function( event ){
 event.preventDefault();
 activeDiv.hide();
 activeDiv.next().show();
 activeDiv = $("#mod_formSteps-4");
 body.animate({scrollTop:0}, '500', 'swing');
 });
});

Answer 1

You can do something like this using the attribute starts-with selector

// get all elements with id's that start with btn_step
$("[id^='btn_step']").on("click", function( event ){ 
 activeDiv.hide();
 activeDiv.next().show();
 activeDiv = $("#mod_formSteps-" + (+this.id.replace('btn_step','') + 1));
 body.animate({scrollTop:0}, '500', 'swing');
});

or give them a similar class

$(".theClass").on("click", function( event ){ 
 activeDiv.hide();
 activeDiv.next().show();
 activeDiv = $("#mod_formSteps-" + (+this.id.replace('btn_step','') + 1));
 body.animate({scrollTop:0}, '500', 'swing');
});

Looking at the code more you can actually just do this

$(".theClass").on("click", function( event ){
 activeDiv = activeDiv.hide().next().show(); 
 body.animate({scrollTop:0}, '500', 'swing');
});

Answer 2

You could use classes for the btn_stepsinstead of individual IDs. Using classes you could use one single function that is fires once a .btn_step element is clicked.

Answer 3

Only thing that's changing is a number so something like

$( document ).ready(function() {
 var activeDiv = $("#mod_formSteps-1"),
 body = $("html, body"),
 steps = 4,
 i = 0;
 activeDiv.siblings().hide();
 for (i; i < steps; i++) {
 var selector = "#btn_step" + i;
 $(selector).on("click", function( event ){
 event.preventDefault();
 activeDiv.hide();
 activeDiv.next().show();
 activeDiv = $("#mod_formSteps-" + (i + 1));
 body.animate({scrollTop:0}, '500', 'swing');
 })
 }
});

Answer 4

You have lots of code duplication, given that you are performing the same operation on elements with three different id attributes. Consider adding a class btn_step to each of the elements btn_step1, btn_step2, and btn_step3. Then, keep track of what step you are on when assigning the click function to each element of the btn_step class:

$( document ).ready(function() {
 var body = $("html, body");
 $(".btn_step").each(function(index, element) {
 element.click(function() {
 var step = index + 1;
 event.preventDefault();
 var activeDiv = $("#mod_formSteps-" + step);
 activeDiv.siblings().hide();
 activeDiv.hide();
 activeDiv.next().show();
 activeDiv = $("#mod_formSteps-2");
 body.animate({scrollTop:0}, '500', 'swing');
 });
 });
};