点击时图像没有改变 - javascript答案

【问题标题】：image not changing on click - javascript点击时图像没有改变 - javascript
【发布时间】：2014-04-29 11:05:26
【问题描述】：

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

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";
       }
  }

当我点击第一张图片时，什么也没有发生。感谢您的帮助。

【问题讨论】：

您遇到什么错误？该函数甚至被调用了吗？你的脚本加载了吗？

标签： javascript image onclick

【解决方案1】：

正如上面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 url 的一部分。

【讨论】：

谢谢你，乔伊 - 它正在工作。但是你能解释一下 -1 的用途吗？我猜这是一种检查条件是否为“真”的方法？
indexOf 返回字符串中与参数匹配的位置。如果未找到匹配项，它将始终返回 -1。它将字符串视为基于 0 的字符数组。

【解决方案2】：

试试这样的：

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/

【讨论】：

【解决方案3】：

首先，您的imgl.src=="images/mathewgarber.jpg" 已将最后一个{ 注释掉。

其次，img1.src 给你一个不同的字符串，看看这个Demo

你应该像这样检查 src：

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

【讨论】：