在两个图片之间切换onclick

Question

之前曾有人问过这个问题，但我发现没有任何问题。 我需要在单击时将图像切换到另一个，然后再单击一次。

<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 ，但不会相反。

Answer 1

如果您的src是从本地系统引用文件，则该文件将不等于ddg.png，而是尝试使用绝对路径file：//yourpath/ddg.png

Answer 2

相同的小型jQuery脚本。 它只是一个基本的。

http://jsfiddle.net/35cfzfv4/

HTML

<img src="http://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg" class="swapimg">

JS

$( document ).ready(function() {
    var dimg = "http://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg";
    var imgswitch = false;
    $('.swapimg').click(function(){
        if(imgswitch){
             $(this).attr('src','http://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
             imgswitch = false;
        }else{
             $(this).attr('src','http://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_02.jpg');
             imgswitch = true;
        }
    })
});

Answer 3

试试这个例子：

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

Answer 4

您的代码对我来说很好。 检查这个小提琴： 切换图像

<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');">

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

Answer 5

答：我期望有一个相对的路径，而是得到了一个绝对的路径。 感谢OJay建议输出this.src 。

Answer 6

通常，浏览器将返回图像的src作为完整URL，您的代码将与文件名不匹配。 要么使用整个URL进行匹配（尽管可能会很长），要么只是查找部分匹配项

例如完整的URL

<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');">

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