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時，他首先使我++（所以去接下來的2張照片），然後他回1張照片。

希望你知道我做錯了什麼，你可以幫助我:) 對不起，我的壞englisch。

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>