Question

我正在自学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>

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

Answer 2

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

Answer 3

您可以使用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>

Answer 4

对于图像交换，您可以获取图像（首先给出您创建Id的图像），然后说：

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

为了跟进你正在做的事情，你也可以改变小狗去做类似的事情：

document.getElementById("dog").appendChild(puppy);

Answer 5

内部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，那么其他评论可能会说首先要学习这些基础知识。

Answer 6

您可以考虑选择Javascript框架，jQuery很受欢迎，并且使这项任务相对容易。您可以更新图像上的src属性，而不是替换所有HTML。类似的东西：

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

或者您也可以替换html：

$('#some_div').html('<img src="images/some_image.jpg" />');

document.write的简单替代方案

6 个答案: