jQuery 如何更改图像 onclick javascript 功能？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18502734/
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
how to change image onclick javascript function?
提问by Amin
I got a problem, I tried several times but result is always same, I don't know what's wrong with my code. If you click on right image, it will change to left image, but if you click on left image, it wont change to right image, why? here is code:
我遇到了问题，我尝试了几次但结果总是一样，我不知道我的代码有什么问题。如果你点击右图，它会变成左图，但如果你点击左图，它不会变成右图，为什么？这是代码：
function changeImage() {
if (document.getElementById("changer").src == "imgs/left.gif")
{
document.getElementById("changer").src = "imgs/right.gif";
}
else
{
document.getElementById("changer").src = "imgs/left.gif";
}
}
and image src code here:
和图像源代码在这里：
<img src="imgs/right.gif" id="changer" onclick="changeImage()"/></a>
I need this function: click on (right arrow image), then it'll change to (left arrow image) and click on same (left arrow image) again will return to default, (right arrow image).
我需要这个功能：点击（右箭头图像），然后它会变成（左箭头图像）并再次点击相同的（左箭头图像）将返回默认值，（右箭头图像）。
Thank you in advance for your time and help.
提前感谢您的时间和帮助。
回答by Mr_Green
As explained by Prabu in his answer that the actual src is absolute pathbut not relative path.
正如 Prabu 在他的回答中所解释的，实际的 src 是绝对路径而不是相对路径。
To solve this:
要解决这个问题：
- Pass the element object i.e thisas argument to the function.
- Create a variable blninside the element object i.e
elementin that function.
- 将元素对象即this作为参数传递给函数。
- 在元素对象内创建一个变量bln，即
element在该函数中。
<img src="imgs/right.gif" id="changer" onclick="changeImage(this)" />
^ pass the element object
function changeImage(element) {
element.src = element.bln ? "imgs/right.gif" : "imgs/left.gif";
element.bln = !element.bln; /* assigns opposite boolean value always */
}
The above function will toggle the image src's without depending on the value present inside the srcproperty.
上面的函数将在不依赖src属性中存在的值的情况下切换图像 src 。
BTW, You can also do this using just CSS:
顺便说一句，您也可以仅使用 CSS 来做到这一点：
回答by Prabu Parthipan
Hey problem is you mentioned foldername/filenamebut document.getElementById("changer").src giving fullpathlike C:\Users\ws21\Desktop\imgs\right.gif
嘿问题是你提到foldername/filename但 document.getElementById("changer").src 给出fullpath像 C:\Users\ws21\Desktop\imgs\right.gif
For example
例如
function changeImage() {
//its checking C:\Users\ws21\Desktop\imgs\right.gif=="imgs\left.gif"
if (document.getElementById("changer").src == "imgs/left.gif")
{
document.getElementById("changer").src = "imgs/right.gif";
}
else
{
document.getElementById("changer").src = "imgs/left.gif";
}
}
So it always execute else part only
所以它总是只执行 else 部分
回答by Roy M J
Try this :
尝试这个 ：
$("#changer").click(function(){
imagePath = $("#changer").attr("src");
if(imagePath == "http://behdasht.co/wp/imgs/left.gif"){
$("#changer").attr("src", "http://behdasht.co/wp/imgs/right.gif");
}else{
$("#changer").attr("src", "http://behdasht.co/wp/imgs/left.gif");
}
});
//Updated to use jquery completely
Fiddle : http://jsfiddle.net/8hGWZ/
小提琴：http: //jsfiddle.net/8hGWZ/
http://jsfiddle.net/8hGWZ/2/(Full jquery)
http://jsfiddle.net/8hGWZ/2/（完整的jquery）
回答by RONE
function changeImage() {
var src = document.getElementById("changer").src;
var imgsrc = src.substring(src.lastIndexOf("/")+1);
if (imgsrc == "left.gif")
{
document.getElementById("changer").src = "imgs/right.gif";
console.log('if'+document.getElementById("changer").src);
}
else
{
document.getElementById("changer").src = "imgs/left.gif";
console.log('if'+document.getElementById("changer").src);
}
}
}
USE THE ABOVE SHOULD WORK
使用上述应该工作
回答by Amin
PROBLEM IS SOLVED. HERE IS COMPLETE ANSWER: WE SHOULD USE FULL PATH OF IMAGE URL OTHERWISE IT WONT WORK.
问题解决了。这是完整的答案：我们应该使用图像 URL 的完整路径，否则它将无法工作。
function changeImage() {
if (document.getElementById("changer").src == "HTTP://YOURDOMAIN/left.gif")
{
document.getElementById("changer").src = "HTTP://YOURDOMAIN/right.gif";
}
else
{
document.getElementById("changer").src = "HTTP://YOURDOMAIN/left.gif";
}
}
Especial thanks to Prabu Parthipan
特别感谢 Prabu Parthipan
THERE IS ANOTHER METHOD :
还有另一种方法：
<img src="imgs/right.gif" id="changer" onclick="changeImage(this)" />
if we use (this) , then no need to use full path of image url. In this case I should say thanks to MR GREEN ... !
如果我们使用 (this) ，则无需使用图像 url 的完整路径。在这种情况下，我应该感谢格林先生......！
回答by Tushar Gupta - curioustushar
回答by Manu M
Hey try complete path for the images in the javascript like
嘿，尝试使用 javascript 中图像的完整路径，例如
if (document.getElementById("changer").src == "http://mydomain.com/imgs/left.gif")
{
document.getElementById("changer").src = "http://mydomain.com/imgs/right.gif";
}
Some browsers use complete url in src
一些浏览器在 src 中使用完整的 url
Or u can check this
或者你可以检查这个
<img src="http://behdasht.co/wp/imgs/right.gif" id="changer" onclick='javascript: this.src = this.src == "http://behdasht.co/wp/imgs/left.gif" ? "http://behdasht.co/wp/imgs/right.gif" : "http://behdasht.co/wp/imgs/left.gif";'/>
回答by Joseph Silber
What you've got should work.
你有什么应该工作。
Here's a shorter version:
这是一个较短的版本：
function changeImage() {
this.src = this.src == "imgs/left.gif" ? "imgs/right.gif" : "imgs/left.gif";
}
