How would you improve this so I wouldn’t have to keep repeating?. I will need to create 50 options.
var timer = 300;
function showLabels() {
$('#machine ul#labels li span').animate({'top': '0px'},'slow');
}
function option1() {
setTimeout(function() { $('#prize-details #prize-text h1').html("Header"); }, timer);
setTimeout(function() { $('#prize-details #prize-text p').html("Text here"); }, timer);
$('#machine ul#labels li#what').html('<span>1</span>');
$('#machine ul#labels li#where').html('<span>2</span>');
$('#machine ul#labels li#with').html('<span>3</span>');
$('#machine ul#labels li#in').html('<span>4</span>');
showLabels();
}
function option2() {
setTimeout(function() { $('#prize-details #prize-text h1').html("Different header here."); }, timer);
setTimeout(function() { $('#prize-details #prize-text p').html("Different text here"); }, timer);
$('#machine ul#labels li#what').html('<span>5</span>');
$('#machine ul#labels li#where').html('<span>6</span>');
$('#machine ul#labels li#with').html('<span>7</span>');
$('#machine ul#labels li#in').html('<span>8</span>');
showLabels();
}
As both of your functions are similar so you can try with one function like
According to edit
If each iteration have different text then call the above function with different parameters like:
and so on.