在两个图像之间切换

Switch between two images onclick

本文关键字：图像 之间 两个      更新时间：2023-09-26

这个问题以前也有人问过，但我发现没有一个是有效的。我需要切换到另一个图像点击，然后再点击回来。

<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="logo.png"代替src="ddg.png"。然而，事实并非如此。如果我将原来的src更改为logo.png(或更改运算符的顺序)，运算符将切换到ddg.png，但不会回到logo.png。我不知道为什么会这样。没有产生控制台错误。我还尝试在单独的文件中编写此操作符并将其链接，以及编写if..else语句。它们都将从ddg.png切换到logo.png，而不是其他方式。

如果你的src从本地系统引用文件，它将不等于ddg.png，而是尝试绝对路径文件://yourpath/ddg.png

相同的小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;
        }
    })
});

试试这个例子:

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

回答:我期待一个相对路径，而不是一个绝对路径。感谢OJay建议输出this.src。

你的代码对我来说很好。检查此设置:TOGGLE IMAGES

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

尝试检查您是否指定了正确的图像路径

通常浏览器将返回图像的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页面在同一个目录

相关文章：