1

我正在自学 JavaScript，但我有点卡住了。这就是我想要做的：我有一个图像，一旦单击该图像，它就会消失并被另外两个图像替换。我的代码有效，但它替换了页面上的所有内容，而不仅仅是换出图像。我认为我必须以某种方式使用innerHTML，但是当我尝试这样做时，没有任何图像出现。我的代码如下 - 我非常感谢任何见解或解释 - 谢谢！

<body>
  <h1>JavaScript Image Test</h1>

<script type="text/javascript">

function showImage(){
        document.write(puppy);
   }

var dog = '<div id="dog"><a href="#"><img src="images/dog.jpg" onclick="showImage();"></a></div>';
var puppy = '<div id="puppy"><img src="images/puppy.jpg"><img src="images/puppy2.jpg"></div>';


document.write(dog);


</script>
</body>
4

6 回答 6

1

将 dog div 写为普通 html，然后替换它的内容：

<body>
  <h1>JavaScript Image Test</h1>

<script type="text/javascript">
function showImage(){
    document.getElementById("dog").innerHTML = puppy;
}

var puppy = '<img src="images/puppy.jpg"><img src="images/puppy2.jpg">';
</script>
<div id="dog"><a href="#"><img src="images/dog.jpg" onclick="showImage();"></a></div>
</body>
于 2013-10-07T19:28:34.633 回答
0

内部 HTML 的工作方式如下：

<body>
<h1>JavaScript Image Test</h1>

<script type="text/javascript">

function showImage(){
  var div = document.getElementById('images');
  div.innerHTML = '<img src="images/dog.jpg" onclick="showImage();">'
} 

</script>

<div id='images'>
  <img src="images/puppy.jpg">
  <img src="images/puppy2.jpg">
</div>

</body>

尽管可能有更好的方法来切换图像，但如果您学习 Javascript 远离 jQuery，因为其他评论可能已经说过，首先学习这些基础知识是个好主意。

于 2013-10-07T19:31:51.423 回答
0

查看document.createElement()或整个 jQuery 库。

于 2013-10-07T19:26:19.627 回答
0

您可以使用 jQuery... 这将在单击链接时替换dog.jpg为puppy.jpg。

<script type="text/javascript">  
    function showImage(){  
        $('#dog').attr('src', 'images/puppy.jpg');
    }
</script>

<a href="#" onclick="showImage();"><img id="dog" src="images/dog.jpg" /></a>
于 2013-10-07T19:30:00.187 回答
0

对于图像交换，您只需获取图像（先给您创建的图像一个 Id），然后说：

document.getElementById("PetImg").src("images/puppy2.jpg");

要遵循您正在做的事情，您还可以使用零钱小狗做类似的事情：

document.getElementById("dog").appendChild(puppy);
于 2013-10-07T19:30:12.710 回答
-1

你可以考虑选择一个 Javascript 框架，jQuery 很流行，这使得这项任务相对容易。src您可以更新图像上的属性，而不是替换所有 HTML 。就像是：

$('#some_div img').attr('src', 'images/some_image.jpg');

或者，您也可以替换 html：

$('#some_div').html('<img src="images/some_image.jpg" />');
于 2013-10-07T19:28:19.320 回答