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，而是尝试绝对路径文件：//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

您的代码适用于我。检查这个小提琴：TOGGLE IMAGES

<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来匹配（虽然这可能非常冗长）或只是寻找部分匹配

e.g。完整网址

<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页面在同一目录中

点击两个图像之间切换

6 个答案: