Question

如果它听起来与之前的问题类似，我道歉，但我已经解决了这些类似的问题，我仍然无法弄清楚我的代码存在什么问题。它很简单，但它不起作用。我有一张图片。我希望它在我点击它时更改为第二个图像，并在我点击第二个图像时更改为第三个图像。然后，我希望它在单击第三个图像时更改回第一个图像。

HTML：

           <img id="narrow" class="item" src="images/joe2.jpg" style="cursor:pointer" onclick="changeImage(this);">

javascipt的：

  function changeImage(imgl) {
       if(imgl.src=="images/joe2.jpg") {
            imgl.src="images/stray_cat.jpg"; 
       }
       else if (imgl.src=="images/stray_cat.jpg") {
            imgl.src="images/mathewgarber.jpg"; 
       }
       else // (imgl.src=="images/mathewgarber.jpg") {
            imgl.src="images/joe2.jpg";
       }
  }

当我点击第一张图片时，没有任何反应。谢谢你的帮助。

Answer 1

尝试这样的事情：

var images = [
    'http://lorempixel.com/100/100/nature/1',
    'http://lorempixel.com/100/100/nature/2',
    'http://lorempixel.com/100/100/nature/3'
],
i = 0;

function changeImage(img) {
    img.src = images[++i % images.length];
}

将图像src与字符串进行比较不是很可靠，因为它可以包含完整的域和协议。相反，您可以将图像存储在数组中并使用%运算符，这对于这种循环非常有用。

演示：http://jsfiddle.net/phJA4/

Answer 2

首先，您的{注释了最后一次imgl.src=="images/mathewgarber.jpg"。

其次，img1.src为您提供了不同的字符串，请查看此Demo

你应该像这样检查src：

if(imgl.src.indexOf("images/joe2.jpg") > -1)

Answer 3

正如上面的dsfq所说，图像src url将是相对的，包括站点主机。

function changeImage(imgl) {
        if (imgl.src.indexOf('images/joe2.jpg') > -1) {        
            imgl.src = "images/stray_cat.jpg";
        } else if (imgl.src.indexOf("images/stray_cat.jpg") > -1) {
            imgl.src = "images/mathewgarber.jpg";
        } else // (imgl.src=="images/mathewgarber.jpg")
        {
            imgl.src = "images/joe2.jpg";
        }
    }

如果您的方法设置了您的心脏，您可以使用indexOf检查来确定图像名称是否是完整src网址的一部分。

图像不会改变点击 - JavaScript

3 个答案:

演示：http://jsfiddle.net/phJA4/