jQuery在按下按钮时循环显示图像

Question

完成编码新手，所以请提前道歉，但是我对这个问题撕裂了我的头发！

手头的任务

我试图让jQuery在无限循环中单击按钮时循环显示一组图像。

到目前为止，我已经得到了以下内容，而且我的逻辑中找不到任何漏洞，但它似乎无法正常工作。如果有人可以快速浏览一下并且可能把它全部放到一个工作的jsfiddle中我会非常感激！

      $(document).ready(function() { 
      $(“#button”).click(function() {

    var src = $('#myimage').attr('src');

    //if the current image is picture1.png, change it to picture2.png
    if(src == 'pic1.png') {
        $("#myimage").attr("src","pic2.png");

    //if the current image is picture2.png, change it to picture3.png 
    } else if(src == "pic2.png") {
        $("#myimage").attr("src","pic3.png"); 

    //if the current image is anything else, change it back to picture1.png
    } else {
        $("#myimage").attr("src","pic1.png");
    }
}); 

UPDATE 我想我的实际小提琴可能做错了什么？ https://jsfiddle.net/pj2wvcdx/

Answer 1

这是一个有效的例子。这完全取决于你的代码，我唯一改变的是你使用"#button"的错误引号，但这可能是一个复制粘贴的东西？并且您没有关闭click函数。

$(document).ready(function() { 
  $("#button").click(function() {
    var src = $('#myimage').attr('src');

    //if the current image is picture1.png, change it to picture2.png
    if(src == 'http://www.libpng.org/pub/png/PngSuite/f01n2c08.png') {
        $("#myimage").attr("src","http://www.libpng.org/pub/png/PngSuite/f02n2c08.png");

    //if the current image is picture2.png, change it to picture3.png 
    } else if(src == "http://www.libpng.org/pub/png/PngSuite/f02n2c08.png") {
        $("#myimage").attr("src","http://www.libpng.org/pub/png/PngSuite/f03n2c08.png"); 
    //if the current image is anything else, change it back to picture1.png
    } else {
        $("#myimage").attr("src","http://www.libpng.org/pub/png/PngSuite/f01n2c08.png");
    }
    console.log("Src is: " + $("#myimage").attr("src"));
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" >Cycle</button>
<img src="http://www.libpng.org/pub/png/PngSuite/f01n2c08.png" id="myimage"/>

您的代码段中的错误是您永远不会从1 - ＆gt; 2。