Reputation: 3
I am learning JavaScript so sorry if the question appears basic.
I made User interface tour, script is working as i want but it is hard to maintain and do any changes.
Q: How to loop the steps so i will just need to add Step title and description and not be bothered with linking between functions?
Any more suggestions to make script better practice?
Thanks in advance.
Link to script: http://jsfiddle.net/gmajsterek/4ar2vvro/15/
$(document).ready(function() {
var title = " ",
description = " ";
$(".UserGuideModal").hide();
$("#ShowHomeUserGuide").click(function () {
step1();
});
function guideModal() {
$("#btnNextTip").attr("disabled", false);
// User Guide Modal Content
$(".modal-title").html(title);
$(".guideDescription").html(description);
}
// Close btn
$(".btn-closewindow").click(function () {
$(".ugoutline").removeClass("ugoutline");
$(".step4").removeClass("ugoutline");
$(".UserGuideModal").hide(300);
});
function step1() {
$(".UserGuideModal").show(300);
title = "Step one title",
description = "Description 1";
$(".step1").addClass("ugoutline");
guideModal();
$("#btnNextTip").click(function () {
step2();
});
}
function step2() {
title = "Step two title",
description = "Description 2";
$(".step1").removeClass("ugoutline");
$(".step4").removeClass("ugoutline");
$(".step2").addClass("ugoutline");
guideModal();
$("#btnNextTip").click(function () {
$(".step2").removeClass("ugoutline");
step3();
});
}
function step3() {
title = "Step three title",
description = "Description 3";
$(".step3").addClass("ugoutline");
$(".step4").removeClass("ugoutline");
guideModal();
$("#btnNextTip").click(function () {
$(".step3").removeClass("ugoutline");
step4();
});
}
function step4() {
title = "Step four title",
description = "Description 4";
$(".step4").addClass("ugoutline");
guideModal();
$(".btn-closewindow").click(function () {
$(".step4").removeClass("ugoutline");
$(".UserGuideModal").hide(300);
});
$("#btnNextTip").attr("disabled", true);
}
});
Upvotes: 0
Views: 78
Reputation: 49
Instead of having each step exist as a function, you should break it up by data and behavior.
I would recommend using:
An array to store step information. e.g.
var steps = [{name: "step1", title: "Step 1", description: "Description 1"}, {name: "step2", title: "Step 2", description: "Description 2"},...]
A function to highlight the appropriate row div. e.g.
var highlightLabel = function(labelClass){
$(".stepLabel").removeClass("ugoutline");
$("."+labelClass).addClass("ugoutline");
} //assuming each of your step1, step2... classes also has the class stepLabel
A single function to handle step display
var showStep = function(stepIndex){
$(".modal-title").html(steps[stepIndex].title);
$(".guideDescription").html(steps[stepIndex].description);
highlightLabel(steps[stepIndex].name);
$("#ShowHomeUserGuide").click();
}
Upvotes: 0
Reputation: 360922
Take anything in the stepX()
functions that's DIFFERENT between the various versions and turn that into a function parameter.
e.g.
function step(stepNumber) {
$('.step' + (stepNumber -1)).removeClass('ugoutline');
$('.step' + stepNumber).addClass('ugoutline"');
step(stepNumber + 1);
}
pass in 4
, you'll do a removeClass on 4-1 = ".step3", and do an addClass on .step4
.
Upvotes: 3