Javascript 单击后在两个图像之间切换

以前有人问过这个问题，但我发现没有一个是有效的。我需要在单击时将一个图像切换到另一个图像，然后再次单击返回

<img id="searchicon" src="ddg.png" width="26px" height="26px" 
     onclick="this.src = ((this.src === 'ddg.png') ? 'logo.png' : 'ddg.png');">

---

这应该行得通

onclick

应将

src

与

ddg.png

进行比较并返回true，将

src=“ddg.png”

替换为

src=“logo.png”

。然而，事实并非如此。如果我将原始的

src

更改为

logo.png

（或更改操作员的顺序），操作员将切换到

ddg.png

，但不会返回到

logo.png

。我不知道为什么会这样。没有生成任何控制台错误。我还尝试在一个单独的文件中编写这个操作符并将其链接到，以及编写

if..else

语句。它们都将从

ddg.png

切换到

logo.png

，但不是相反。这只是一个基本的问题

HTML

试试这个例子：

<img src="http://dizzyfrinks.com/wp-content/uploads/2010/11/65sprite.jpg" onclick="swap(this);"/>

---

你的代码对我来说很好。 检查这把小提琴：

---

请尝试检查是否已正确指定图像路径。

回答：我期望的是相对路径，而不是绝对路径。感谢OJay建议输出

this.src

如果您的src正在引用本地系统中的文件，则该文件将不等于ddg.png，请尝试绝对路径file://yourpath/ddg.png

通常浏览器会返回图像的

src

作为完整URL，您的代码与文件名不匹配。要么使用整个URL进行匹配（尽管这可能相当长），要么只查找部分匹配

e、 g。 完整URL

或者只是检查字符串中某个位置是否出现该文件名

 <img id="searchicon" src="ddg.png" width="26px" height="26px" 
         onclick="this.src = ((this.src.indexOf('ddg.png') > -1) ? 'logo.png' : 'ddg.png');">

-1）？'logo.png'：'ddg.png'）；">

---

尽管请记住，您将其设置为的新src必须是绝对的，或者是它所在HTML页面的相对路径，但上面的示例假定您的图片与HTML页面位于同一目录中，我将确切地确认

this.src

返回的内容，因为它与您认为应该返回的内容不匹配（按照您编写的方式，它必须完全匹配，包括大小写）。请尝试

onclick=“alert（this.src）”

看看您得到了什么。它对我来说运行良好，请检查小提琴。this.src返回的是绝对路径，而不是相对路径。谢谢OJay。

<img src="http://dizzyfrinks.com/wp-content/uploads/2010/11/65sprite.jpg" onclick="swap(this);"/>

var swap = function (img) {
    img.src = 'http://dizzyfrinks.com/wp-content/uploads/2010/11/65sprite.jpg' === img.src ?
        'http://www.wired.com/images_blogs/gadgetlab/sprite.jpg'
    : 'http://dizzyfrinks.com/wp-content/uploads/2010/11/65sprite.jpg';
};

<img id="searchicon" src="http://i.stack.imgur.com/hi0uj.png?s=32&g=1" width="26px" height="26px" 
     onclick="this.src = ((this.src === 'http://i.stack.imgur.com/hi0uj.png?s=32&g=1') ? 'http://i.stack.imgur.com/BuFJV.jpg?s=32&g=1' : 'http://i.stack.imgur.com/hi0uj.png?s=32&g=1');">

<img id="searchicon" src="ddg.png" width="26px" height="26px" 
     onclick="this.src = ((this.src === 'http://www.whateveryoursiteis.com/ddg.png') ? 'logo.png' : 'ddg.png');">

 <img id="searchicon" src="ddg.png" width="26px" height="26px" 
         onclick="this.src = ((this.src.indexOf('ddg.png') > -1) ? 'logo.png' : 'ddg.png');">