Javascript document.getElementById（'；'；）.src==？？？（等于失败）

我的javascript是

function changeImage(imgID) {
var baseurl = "media/images/";
if (document.getElementById(imgID).src == baseurl+"selection-off.png") {
    alert('Success');
    document.getElementById(imgID).src = baseurl+"selection-no.png"; }
else {
    alert('Fail'); } }

我的HTML是

<div id="mustard" class="checkbox"><img id="mustard-img" class="no-off" src="media/images/selection-off.png" alt="checkbox" onClick="changeImage('mustard-img')" /></div>

---

我总是在点击图片时失败。我一定错过了一些非常基本的东西。

您确定在加载脚本时构建了DOM吗？

警报字符串document.getElementById（imgID）.src。它可能采用完整路径，即包括主机名，而您正在比较的字符串具有相对路径。

一些浏览器将

img

src转换为完整url（包括

http://www....

）

尝试提醒它以确保

你可以使用

document.getElementById(imgID).src.indexOf( baseurl+"selection-off.png" ) >= 0

---

检查一个字符串是否包含在另一个字符串中。

这是因为浏览器更改了src属性。不要这样做，这是检查和更改css类或样式属性的正确方法。

我在自己的服务器上尝试了您的代码

结果：

document.getElementById（芥末img）.src

“

http://localhost/webfiles/media/images/selection-off.png“

baseurl+“selection off.png”

是“

media/images/selection off.png

”

baseurl似乎只显示相对url。

---

这就是“失败”被警告的原因。

基于图像的复选框非常常见，但下面是完整的解决方案

1） 首先渲染实际复选框。这些适用于100%的浏览器

2） 加载页面时，将“图像复选框”置于复选框旁边并隐藏复选框

3） 单击图像时，切换复选框并使用隐藏复选框确定图像的状态

---

当表单发布时，复选框将像普通复选框一样工作。如果JavaScript被禁用或不可用，表单仍然可用。

请尝试以下代码：

 <div id="mustard" class="checkbox"><img id="mustard-img" class="no-off" src="media/images/selection-off.png" alt="checkbox" onClick="changeImage(this)" /></div>

 <script>
 function changeImage(img) {
  if (img.src.indexOf('selection-off.png')) {
      alert('Success');
      img.src.replace(/selection-off.png/, 'selection-no.png');
  }else{
      alert('Fail');
  }
 }
 </script>

功能更改图像（img）{
if（img.src.indexOf（'selection-off.png'））{
警惕（“成功”）；
img.src.replace（/selection-off.png/，'selection-no.png'）；
}否则{
警报（“失败”）；
}
}

与代码的差异：

• 传递img引用：

  此

  而不是onclick函数中的id
• 对于相对路径，请使用

  indexOf

  而不是==

---

此外，我建议在必须交换图像时使用精灵（尽管在本例中使用的是元素）。然后你只需改变图像的偏移量，就是这样。有没有办法避免这种行为？@pattern，没有。这是浏览器在内部表示url路径的方式。。我们只能解决这个问题。。