Question

I’ve built a changing banner for some magazine issues, it’s all working exactly as I want but I’m wondering if there’s a better option than all the if statements I’m using to check ‘issueTotal’, this seems like back practise but it’s currently the only way I can think of to get it to work.

Any responses would be greatly appreciated, thanks in advance.

jQuery

 var issueTotal = 0;



$(document).ready(function(){

$('#backIssue0').show();

$('.prevButton').hide();    

$('.nextButton').click(function(e) {
    e.preventDefault();

    issueTotal = issueTotal + 1;

    if(issueTotal > 0){
        $('.prevButton').show();
    }
    if(issueTotal < 4){
        $('.nextButton').show();
    }    
    if(issueTotal > 3){
        $('.nextButton').hide();
    }

    if(issueTotal == 0){
        $('#backIssue0').show();
    }
    if(issueTotal == 1){
        $('#backIssue0').hide();
        $('#backIssue1').show();
    }
    if(issueTotal == 2){
        $('#backIssue1').hide();
        $('#backIssue2').show();
    }
    if(issueTotal == 3){
        $('#backIssue2').hide();
        $('#backIssue3').show();
    }
    if(issueTotal == 4){
        $('#backIssue3').hide();
        $('#backIssue4').show();
    }

});


$('.prevButton').click(function(e) {
    e.preventDefault();

    issueTotal = issueTotal - 1;

    if(issueTotal > 1){
        $('.prevButton').show();
    }
    if(issueTotal < 1){
        $('.prevButton').hide();
    }
    if(issueTotal < 4){
        $('.nextButton').show();
    }    
    if(issueTotal > 3){
        $('.nextButton').hide();
    }

    if(issueTotal == 0){
        $('#backIssue0').show();
    }
    if(issueTotal == 1){
        $('#backIssue0').hide();
        $('#backIssue1').show();
    }
    if(issueTotal == 2){
        $('#backIssue1').hide();
        $('#backIssue2').show();
    }
    if(issueTotal == 3){
        $('#backIssue2').hide();
        $('#backIssue3').show();
    }
    if(issueTotal == 4){
        $('#backIssue3').hide();
        $('#backIssue4').show();
    }
});

 });

I’ve built a js fiddle for the example:

http://jsfiddle.net/huddds/5Z39B/

Answer 1

You can replace

if(issueTotal == 0){
    $('#backIssue0').show();
}
if(issueTotal == 1){
    $('#backIssue0').hide();
    $('#backIssue1').show();
}
if(issueTotal == 2){
    $('#backIssue1').hide();
    $('#backIssue2').show();
}
if(issueTotal == 3){
    $('#backIssue2').hide();
    $('#backIssue3').show();
}
if(issueTotal == 4){
    $('#backIssue3').hide();
    $('#backIssue4').show();
}

with this:

$("#backIssue" + issueTotal).show();
if(issueTotal > 0) {
    $('#backIssue' + (issueTotal - 1)).hide();
}

Try similarly for others.