Question

我的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>

单击图像时我总是失败。我必须错过一些非常基本的东西。

Answer 1

有些浏览器会将img src转换为完整网址（包括http://www....）

尝试提醒它确保..

您可以使用

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

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

Answer 2

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

Answer 3

我在自己的服务器上试过你的代码。

<强>结果：

document.getElementById(mustard-img).src是 “http://localhost/webfiles/media/images/selection-off.png'

baseurl+"selection-off.png"是“media/images/selection-off.png”

baseurl似乎只显示相对网址。所以这就是“失败”被警告的原因。

Answer 4

尝试使用以下代码：

 <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引用：this而不是onclick函数中的id
使用indexOf代替==，用于相对路径

Answer 5

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

Answer 6

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

Answer 7

基于图像的复选框很常见，但这是完整的解决方案。

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

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

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

当表单被POST后，复选框将像普通复选框一样工作。如果JavaScript已禁用或无法使用，则表单仍可使用。

document.getElementById（''）。src == ??? （等于失败）

7 个答案: