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>