Javascript / jQuery switch statement using static defined variable

Question

I am attempting to write a script which toggles pictures of videos however the switch seems to not work in my case and I'm terrible at javascript. I simply want on page load to set the vid=1; and cycle through my options using the click events. Where did I go wrong? I am trying to use this example to use: switch statement in Jquery and List

My Code:

$(function(){
  var vid=1;
  $('#next-vid').click(function(){
      switch (vid) { 
        case '1': 
            $('#vid1').hide();
            $('#vid2').show();
            $('#vid3').hide();
            $('#vid4').hide();
            vid=2;
            break;
        case '2': 
            $('#vid1').hide();
            $('#vid2').hide();
            $('#vid3').show();
            $('#vid4').hide();
            vid=3;    
            break;
        case '3':
            $('#vid1').hide();
            $('#vid2').hide();
            $('#vid3').hide();
            $('#vid4').show();
            vid=4;  
            break;
        case '4': 
            $('#vid1').show();
            $('#vid2').hide();
            $('#vid3').hide();
            $('#vid4').hide();
            vid=1;  
            break;
    }
  });
  $('#prev-vid').click(function(){
      switch (vid) { 
        case '1': 
            $('#vid1').hide();
            $('#vid2').hide();
            $('#vid3').hide();
            $('#vid4').show();
            vid=4;
            break;
        case '2': 
            $('#vid1').show();
            $('#vid2').hide();
            $('#vid3').hide();
            $('#vid4').hide();
            vid=1;    
            break;
        case '3':
            $('#vid1').hide();
            $('#vid2').show();
            $('#vid3').hide();
            $('#vid4').show();
            vid=2;  
            break;
        case '4': 
            $('#vid1').hide();
            $('#vid2').hide();
            $('#vid3').show();
            $('#vid4').hide();
            vid=3;  
            break;
    }
  });

});

setting numbers but cases are strings – charlietfl Dec 13 '13 at 02:31 — charlietfl, Dec 13 '13 at 02:31

score 4 · Accepted Answer · answered Dec 13 '13 at 02:32

Erm... that could be a LOT simpler.

$(function() {
    var vid = 0;
    $("#next-vid").click(function() {
        vid = (vid + 1) % 4;
        $("[id^=vid]").hide();
        $("#vid"+(vid+1)).show();
    });
    $("#prev-vid").click(function() {
        vid = (vid + 3) % 4;
        $("[id^=vid]").hide();
        $("#vid"+(vid+1)).show();
    });
});

score 1 · Answer 2 · answered Dec 13 '13 at 02:33

1

The switch is unnecessary.

http://jsfiddle.net/MNe57/1/

var vid=1;
$('#next-vid').click(function(){
    vid = vid === 4 ? 1 : vid+1;
    $('[id^="vid"]').hide();
    $('#vid'+vid).show();
});
$('#prev-vid').click(function(){
    vid = vid === 1 ? 4 : vid-1;
    $('[id^="vid"]').hide();
    $('#vid'+vid).show();
});

answered Dec 13 '13 at 02:33

Adam Merrifield

10,307
4
41
58

-clicks the next video button repeatedly- It don't work! – Niet the Dark Absol Dec 13 '13 at 02:33
@NiettheDarkAbsol I'm reading your answer right now and never even thought of using mods :x very nice – Adam Merrifield Dec 13 '13 at 02:34

Javascript / jQuery switch statement using static defined variable

2 Answers2