点击时Javascript更改图片答案

【问题标题】：Javascript change a picture when clicking点击时Javascript更改图片
【发布时间】：2011-10-27 12:52:01
【问题描述】：

我写了这个函数来改变我的图片有什么问题？我的目标是，如果单击显示图像 p，则单击 2 个图像之间的图像切换显示图像 p1

我在脚本中有这个：

  <script>
  function changeimage()
  {
   if(this.getElementById('myimage').src=="../../images/p1.gif")
   {

    document.getElementById('myimage').src="../../images/p.gif";
   }
  else
   {
    document.getElementById('myimage').src="../../images/p1.gif";
   }
  }
  </script>

在 html 部分，我有这些不止一张图片，但我将它们全部设置为 Id=myimage 设置整个同一个 ID 是否错误？：

<table width="100%">
<tr>
<td><img id='myimage' src="../../images/p1.gif" onclick="changeimage();setTable('table2');setTable('table2-2');check('table3');check('table3-3');check('table3-3-3');check('table4');check('table5');check('table6');check('table6-1');"></td>
    <td style="font-weight: bold;font-size:13;  font-family:arial,verdana;" width="25%">General Rule Options</td>
    <td valign="bottom" width="100%">

我的表格中有很多这样的行

【问题讨论】：

怎么了？发生什么了？你在哪里调用函数？
请告诉我哪里错了！我的表格和 html 中有图片！
因为你没有提供足够的细节。
Slaks 和其他人请不要投票给我吗？投票后对我来说是有风险的，我不能再提问了
@Negin：那么你应该学习如何提出更好的问题。始终添加尽可能多的细节，发布您收到的任何错误消息。要求人们不要对糟糕的问题投反对票可能会让你获得更多的反对票。

标签： javascript

【解决方案1】：

问题出在下面一行：

if(this.getElementById('myimage').src=="../../images/p1.gif")

特别是this 的使用。在您的函数中 this 将引用窗口，并且窗口没有 getElementById 方法。像在其他情况下一样使用document：

if(document.getElementById('myimage').src=="../../images/p1.gif") {
    //...
}

它看起来应该可以正常工作。或者，您可以在调用事件处理程序时传入对单击元素的引用，并引用它而不是使用getElementById。例如：

onclick="changeimage(this);"

【讨论】：

【解决方案2】：

您从<img> 元素调用changeImage()，然后在函数内部引用this。由于函数在没有上下文的情况下运行（它没有附加到对象上），this 将引用 window 对象，它没有 getElementById。

在您的 HTML 中，将 onclick="changeImage() 更改为 onclick="changeImage(this) 并更改您的 changeImage 函数以使用传递的参数：

  function changeimage(img) {
      if(img.src=="../../images/p1.gif")
          img.src="../../images/p.gif";
      else
          img.src="../../images/p1.gif";
  }

【讨论】：

谢谢！我不知道它会引用窗口而不是源

【解决方案3】：

在 if 语句中，它应该是 document.getElementById() 而不是 this.getElementById()。

尽管如此，您可以将点击元素的引用传递给您的函数：

<img onclick="changeImage(this);">

function changeImage(imgEl) {
   if(imgEl.src=="../../images/p1.gif") {
      imgEl.src="../../images/p.gif";
   } else {
      imgEl.src="../../images/p1.gif";
   }
}

这样，如果您的所有表格行都使用相同的两个图像，它们都可以调用相同的函数。比将函数硬编码到特定元素的 ID 更好。

【讨论】：

this 不会引用与事件关联的元素，因为它没有传递到事件处理程序中。 this 将引用窗口。
@James Allardice - 是的，我在发布并返回并修复它之后就意识到了这一点。

【解决方案4】：

你需要像这样在点击时调用函数：

http://jsfiddle.net/4ca9m/

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<img id="special" src="http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg" alt ="none">

<script>
$("img#special").click(function () { 
  if($(this).attr("src") == "http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg")
    {
    $(this).attr("src", "http://gcaptain.com/wp-content/uploads/2011/04/image5.png");
    }
    else
    {
     $(this).attr("src", "http://nssdc.gsfc.nasa.gov/image/planetary/venus/gal_venus_37218.jpg");
    }
});
</script>

</body>
</html>

【讨论】：

假设 Negin 能够识别出你的代码需要 jQuery，并进一步假设引入 jQuery 只是为了修复一个几乎可以正常工作的函数是可以接受的。

【解决方案5】：

它不起作用，因为当您使用像这样的相对路径时：

<img src="../../images/p1.gif" onclick="changeimage();" />

浏览器可能会偷偷把它变成绝对路径，比如：

<img src="http://example.com/somewhere/images/p1.gif" onclick="changeimage();" />

至少 Internet Explorer 9 公开了这种行为。但是，您不应该依赖这种行为。

至少有两种方法可以解决这个问题：

使用data- 属性。您向图像标签添加自定义属性：

<img src="../../images/p1.gif" data-image="p1" onclick="changeimage();" />

然后将您的 JavaScript 函数更改为：

<script>          
function changeimage()          
{          
    if(this.getElementById('myimage').getAttribute("data-image") == "p1") {
        document.getElementById('myimage').src="../../images/p.gif";
        document.getElementById('myimage').setAttribute("data-image", "p");
    } else {
        document.getElementById('myimage').src="../../images/p1.gif";
        document.getElementById('myimage').setAttribute("data-image", "p1");
    }
}
</script>

使用变量来完成与上述相同的事情。

<img src="../../images/p1.gif" onclick="changeimage();" />

还有 JavaScript：

    <script>
    var image = "p1";
    function changeimage()
    {
        if(image == "p1") {
            document.getElementById('myimage').src="../../images/p.gif";
            image = "p";
        } else {
            document.getElementById('myimage').src="../../images/p1.gif";
            image = "p1";
        }
    }
    </script>

我更喜欢第一种方法，因为它允许我将有关图像的所有信息包含在图像本身中，而不是在几行之外声明的变量中。

【讨论】：