Question

我写这个函数来改变我的图片有什么问题？我的目标是点击图片在2张图片之间切换，如果图像p通过点击显示我的图像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%">

我的表中有很多行像这样

Answer 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);"

Answer 2

您需要点击这样调用该功能：

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>

Answer 3

您从changeImage()元素中调用<img>，然后在函数内引用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";
  }

Answer 4

在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更好。

Answer 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>

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

点击时Javascript更改图片

5 个答案: