如何使用JavaScript更改点击时的图片来源？

Question

我试图弄清楚如何在单击不同按钮以显示动物图片时更改图像源。 我的JS代码位于HTML文档开头的脚本标签之间。 我将其粘贴在下面。 我正在使用Safari。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome</title>
    <link rel="stylesheet" href="styles.css">

    <script>
    function change (){
     document.getElementById("pic").src="./images/lion.jpg";
    }
    </script>

  </head>
  <body>

  <header>
   <div class="container">
    <h1>Choose an Animal</h1>
    <hr>
   </div>
  </header>

  <section>
   <div class="container">
    <img src="./images/image.jpg" id="pic">
   </div>
  </section>

  <section id="animals">
   <div class="container">
     <button type="button" class="button1"     onclick="change">Lion</button>
     <button type="button" class="button1">Tiger</button>
     <button type="button" class="button1">Bear</button>
   </div>
  </section>



  </body>
</html>

Answer 1

我可能会尝试将ID分配给容器div并设置CSS，以便div的背景就是您想要的图像，类似地，您可以使用js更改CSS背景。

  <section> <div class="container" id="pic"> <!-- no img tag needed now --> </div> </section>

在这里，您可以使用js抓取div，并让click函数执行更改图像的相同任务，但是它将通过在CSS中更改div的background-image属性来执行此操作。

 function myFunc () { document.getElementById('pic').style.backgroundImage = 'url(path/to/image.jpg)'; }

Answer 2

如果使用的是JQuery，则可以以更有效的方式编写代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

  <header>
   <div class="container">
    <h1>Choose an Animal</h1>
    <hr>
   </div>
  </header>

  <section>
   <div class="container">
    <img src="images/lion.jpg" id="pic">
   </div>
  </section>

  <section id="animals">
   <div class="container">
     <button type="button" class="button1" data-img="lion.jpg">Lion</button>
     <button type="button" class="button1" data-img="tiger.jpg">Tiger</button>
     <button type="button" class="button1" data-img="bear.jpg">Bear</button>
   </div>
  </section>

   <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

  <script type="text/javascript">
    $(function(){
      $('.button1').on('click',function(){
        var image = $(this).data('img');
        $('.container #pic').attr('src','images/'+ image);
      });  
    })
  </script>

Answer 3

一个入门的简单选择是将JavaScript更改为以下内容：

 function change(index) { var imageLookup = ["./images/lion.jpg", "./images/tiger.jpg", "./images/bear.jpg"]; document.getElementById("pic").src = imageLookup[index]; }

如果将图像列表放置在数组中，则可以将每个按钮的索引传递给change函数。

如图所示，修改按钮功能，将狮子更改为（0），将老虎更改为（1），将熊更改为（2）。 狮子，老虎和熊，噢，我的...如果您的图像路径正确，则应该看到一些切换。

如果您仍在挣扎，请告诉我。

如何使用JavaScript更改点击时的图片来源？

问题描述

3 个解决方案

解决方案1
2 2017-12-24 07:43:56

解决方案2
0 2017-12-24 06:34:29

解决方案3
0 已采纳 2017-12-24 09:58:27

如何使用JavaScript更改点击时的图片来源？

问题描述

3 个解决方案

解决方案1 2 2017-12-24 07:43:56

解决方案2 0 2017-12-24 06:34:29

解决方案3 0 已采纳 2017-12-24 09:58:27

解决方案1
2 2017-12-24 07:43:56

解决方案2
0 2017-12-24 06:34:29

解决方案3
0 已采纳 2017-12-24 09:58:27