javascript - src image changer after click with JavaScript

Question

I have this image in my html page:

<img src="/images/deactivate.png" onclick="act_deact(this);"/>

and in my javascript code i have this:

function act_deact(image) {
    image.src = (image.src=="/images/activate.png" ) ? "/images/deactivate.png" : "/images/activate.png";
}

and when i click on the image that initially deactivated it activate but in the second click it doesn't desactivate !

is there any probleme with my code ?

from JS amateur :)

Answer 1

/images/activate.png这是因为当您在第一次单击时将其设置为（或更改为）时，该src属性不再只是/images/activate.png，而是以服务器地址为前缀。

你可以在这里查看：http: //jsfiddle.net/hGcqq/

或者在您自己的服务器上，如果您愿意，可以使用 aconsole.log或 an 。alert

Answer 2

首先是括号，应该是这样的：

image.src = (image.src=="/images/activate.png" ? "/images/deactivate.png" : "/images/activate.png")

还可以尝试使用 image.getAttribute("src") 和 image.setAttribute("src") 而不是 image.src。

请尝试以下代码：

function act_deact(image) {
    image.setAttribute("src", (image.getAttribute("src")=="/images/activate.png" ? "/images/deactivate.png" : "/images/activate.png"))
}

编辑：其他答案告诉您绝对和相对网址的问题，因此 getAttribute 将解决该问题。我不建议在这里使用 RegExp 或子字符串。

Answer 3

要使其与相对 url 一起使用，您可以像这样简单地保存当前 url：

var newsrc = "/images/deactivate.png";
function act_deact(image) {
  if ( newsrc == "/images/deactivate.png" ) {
    image.src = "/images/activate.png";
    newsrc  = "/images/activate.png";
  }
  else {
    image.src = "/images/deactivate.png";
    newsrc  = "/images/deactivate.png";
  }
}

然后调用它

<img src="/images/deactivate.png" onclick="act_deact(this);"/>

Answer 4

@hjpotter92已经解释了它不起作用的原因。

使其工作的一种方法是检查src是否以/images/activate.png：

var activateURL = '/images/activate.png';
if (img.src.substring(img.src.length - activateURL.length) !== activateURL) {
    image.src = '/images/activate.png';
} else {
    image.src = '/images/deactivate.png';
}

Answer 5

image.src 包含规范路径，即使使用相对路径初始化。您可以在条件下使用完整路径，例如

function act_deact(image) {
    image.src = (image.src=="FULL-PATH-OF-IMAGE" ) ? "/images/deactivate.png" : "images/activate.png";
}

（要获得完整路径，可以使用 alert(image.src);)

或者，如果您的所有图像都有唯一的名称

function act_deact(image) {
    image.src = image.src.match(/activate.png$/) ? "/images/deactivate.png" : "images/activate.png";
}

Answer 6

我自己找到了解决方案：p 并且我尝试了@fardjad 命题，即在 url 中寻找字符串并创建条件

我分享解决方案:)

function act_deact(image) {
if(image.src.indexOf('deactivate') != -1)
   image.src="/images/activate.png";
else 
   image.src="/images/deactivate.png";
}

@hjpotter92：带有检查条件的解决方案image.alt适用于：

html:

<img alt="deactivate" src="/images/deactivate.png" onClick="act_deact(this);" />

Js函数：

function act_deact(image) { 
    if (image.alt=="activate") {
       image.src = "/images/deactivate.png";
       image.alt = "deactivate"                                          }
    else {  
       image.src = "/images/activate.png"; 
       image.alt = "activate"
    }
}

感谢您的回复:)