자바 스크립트 다음/이전 스크립트

Question

는 얘들이이 내 스크립트 아니다 내 스크립트

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> 
<script> 
$(document).ready(function(){ 
    var i = 2; 
    $("#n_next").click(function(){ 
     var srcbefore='img/zeitvergleich/'+i+'/before.jpg'; 
     var srcAfter="img/zeitvergleich/"+i+"/after.jpg"; 
     $("#changer1").attr("src",srcbefore); 
     $("#changer2").attr("src",srcAfter); 
     console.log(srcbefore+"::"+srcAfter); 
     i++; 
    }); 

    $("#n_prev").click(function(){ 
     var srcbefore='img/zeitvergleich/'+i+'/before.jpg'; 
     var srcAfter="img/zeitvergleich/"+i+"/after.jpg"; 
     $("#changer1").attr("src",srcbefore); 
     $("#changer2").attr("src",srcAfter); 
     console.log(srcbefore+"::"+srcAfter); 
     i--; 
    }); 
}); 
</script> 

<div><img id="changer1" alt="before" src="img/zeitvergleich/1/before.jpg" width="540" height="360" /> <img id="changer2" alt="after" src="img/zeitvergleich/1/after.jpg" width="540" height="360" /></div> 
<img src="img/prev.png" id="n_prev"/> <img src="img/next.png" id="n_next"/> 

입니다. 누군가 내가 적어도 "다음"버튼으로 작동하도록 도왔습니다. 그러나 문제는 "prev"버튼으로 어떻게 작동하는지 파악할 수 없다는 것입니다.

이제 다음을 누르면 제대로 작동합니다. 그러나 내가 prev를 누를 때 그는 먼저 i ++을 만듭니다 (다음 2 장의 그림으로 간다). 그리고 그는 1 장의 그림을 되 찾습니다.

당신이 뭘 잘못했는지 알기를 바랍니다. 당신은 저를 도울 수 있습니다. :) 그리고 나쁜 영어로 죄송합니다.

Answer 1

문제는 i 색인 추적입니다. 처음에는 증가/감소를 시도하십시오! 신속하고 더러운 수정 :

<script> 
$(document).ready(function(){ 
    var i = 1; 
    $("#n_next").click(function(){ 
     i++; 
     var srcbefore='img/zeitvergleich/'+i+'/before.jpg'; 
     var srcAfter="img/zeitvergleich/"+i+"/after.jpg"; 
     $("#changer1").attr("src",srcbefore); 
     $("#changer2").attr("src",srcAfter); 
     console.log(srcbefore+"::"+srcAfter); 
    }); 

    $("#n_prev").click(function(){ 
     i--; 
     var srcbefore='img/zeitvergleich/'+i+'/before.jpg'; 
     var srcAfter="img/zeitvergleich/"+i+"/after.jpg"; 
     $("#changer1").attr("src",srcbefore); 
     $("#changer2").attr("src",srcAfter); 
     console.log(srcbefore+"::"+srcAfter); 
    }); 
}); 
</script> 

업데이트 :

<script> 
$(document).ready(function(){ 
    var i = 1; 
    var showImageSet = function (index) { 
     var srcbefore='img/zeitvergleich/'+index+'/before.jpg'; 
     var srcAfter="img/zeitvergleich/"+index+"/after.jpg"; 
     $("#changer1").attr("src",srcbefore); 
     $("#changer2").attr("src",srcAfter); 
     console.log(srcbefore+"::"+srcAfter); 
    }; 

    $("#n_next").click(function(){ 
     i++; 
     showImageSet(i); 
    }); 

    $("#n_prev").click(function(){ 
     i--; 
     showImageSet(i); 
    }); 
}); 
</script>