정적 정의 된 변수를 사용하는 Javascript/jQuery switch 문

Question

비디오 사진을 전환하는 스크립트를 작성하려고하지만 스위치가 내 경우에 작동하지 않는 것처럼 보입니다. 자바 스크립트에서는 끔찍합니다. 페이지로드시 단순히 vid=1;을 설정하고 클릭 이벤트를 사용하여 내 옵션을 순환 시키길 원할뿐입니다. 나는 어디로 잘못 갔는가? 내가 사용하는이 예제를 사용하는 것을 시도하고있다 : switch statement in Jquery and List이

내 코드 :

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

}); 

Answer 1

음이 ... 그 많은 간단 할 수있다.

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

Answer 2

스위치가 필요하지 않습니다.

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