使用 Javascript 切换图像 src 属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12225843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle image src attribute using Javascript
提问by user1583775
I am trying to change the HTML image srcusing Javascript. I have two images Plus.gif and Minus.gif.I have inserted HTML imgtag and have written a Javascript function to change the image srcwhen clicked.
我正在尝试src使用 Javascript更改 HTML 图像。我有两张图片 Plus.gif 和 Minus.gif。我已经插入了 HTMLimg标签并编写了一个 Javascript 函数来src在单击时更改图像。
Problem is that I want to change it back again when user clicks on the image.
For example when the page is loaded the Plus.gifshows and when user clicks on it the image it changes to Minus.gif.
问题是我想在用户单击图像时再次将其更改回来。例如，当页面被加载Plus.gif时，当用户点击它时，它会变成Minus.gif。
I want it so, when the image is Minus.gifand user clicks on it this should be changed to Plus.gif.
我想要这样，当图像是Minus.gif并且用户点击它时，这应该更改为Plus.gif.
Here is my Javascript function:
这是我的 Javascript 函数：
<script language="javascript" type="text/javascript">
function chngimg() {
var img = document.getElementById('imgplus').src; //= 'Images/Minus.gif';
if (img) {
document.getElementById('imgplus').src = 'Images/Minus.gif';
} else if (!img) {
document.getElementById('imgplus').src = 'Images/Plus.gif';
alert(img);
}
}
</script>
Image tag:
图片标签：
<img id="imgplus" alt="" src="Images/Plus.gif" onmouseover="this.style.cursor='pointer'" onclick="chngimg()" />
回答by Sandeep
See the changes I made to make it working
查看我为使其工作所做的更改
<script language="javascript" type="text/javascript">
function chngimg() {
var img = document.getElementById('imgplus').src;
if (img.indexOf('Plus.gif')!=-1) {
document.getElementById('imgplus').src = 'Images/Minus.gif';
}
else {
document.getElementById('imgplus').src = 'Images/Plus.gif';
}
}
</script>
<img id="imgplus" alt="" src="Images/Plus.gif" onmouseover="this.style.cursor='pointer'" onclick="chngimg()" />
Hope that resolves your question.
希望能解决你的问题。
回答by Wtait
I have successfully used this general solution in pure JS for the problem of toggling an img url:
我已经成功地在纯 JS 中使用了这个通用解决方案来解决切换 img url 的问题：
function toggleImg() {
let initialImg = document.getElementById("img-toggle").src;
let srcTest = initialImg.includes('initial/img/url');
let newImg = {
'true':'second/img/url',
'false':'initial/img/url'}[srcTest];
return newImg;
}
Then call toggleImg() inside whatever event handler you use....
然后在您使用的任何事件处理程序中调用 toggleImg() ......
someButton.addEventListener("click", function() {
document.getElementById("img-toggle").src = toggleImg();
}
回答by McGarnagle
One way would be to add a togglevariable in your function:
一种方法是在您的函数中添加一个切换变量：
var toggle = false;
function chngimg() {
if (toggle === true) {
document.getElementById('imgplus').src = 'Images/Minus.gif';
} else {
document.getElementById('imgplus').src = 'Images/Plus.gif';
alert(img);
}
toggle = !toggle;
}
Note that it's a better practice to use a sprite for this kind of thing. If you're using two images, the user experience is going to be clunky, because the first time they click the image, there will be a slight delay while the second image loads.
请注意，对此类事情使用精灵是更好的做法。如果您使用两个图像，用户体验将会很笨拙，因为他们第一次单击图像时，加载第二个图像时会有轻微的延迟。
Ideally you would have the two images as a sprite sheet, and be using JQuery. Then you could just do it like this.
理想情况下，您将两个图像作为精灵表，并使用 JQuery。那你就可以这样了。
HTML
HTML
<img id="imgplus" src="Images/Sprite.gif" onclick="chngimg()" />
CSS
CSS
#imgplus .clicked { background-position: 0 -30px; }
Javascript
Javascript
function chngimg() {
$("#imgplus").toggleClass("clicked");
}
