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
– charlietfl

2013-12-13 02:31:52 +00:00
Commented Dec 13, 2013 at 2:31 — charlietfl
– charlietfl, Commented Dec 13, 2013 at 2:31

Niet the Dark Absol · Accepted Answer · 2013-12-13 02:32:12Z

4

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();
    });
});

answered Dec 13, 2013 at 2:32

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam Merrifield · Accepted Answer · 2013-12-13 02:33:24Z

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, 2013 at 2:33

Adam Merrifield

10.4k4 gold badges45 silver badges60 bronze badges

2 Comments

Niet the Dark Absol Over a year ago

-clicks the next video button repeatedly- It don't work!

Adam Merrifield Over a year ago

@NiettheDarkAbsol I'm reading your answer right now and never even thought of using mods :x very nice

Collectives™ on Stack Overflow

Javascript / jQuery switch statement using static defined variable

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related