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背景道具。

＆＃13;

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

＆＃13;

从这里你可以用js获取div并让你的点击功能执行改变图像的相同任务，但它会通过改变CSS中div的background-image属性来实现这一点。

＆＃13;

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

＆＃13;

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更改为：

＆＃13;

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

＆＃13;

如果您将图像列表放在一个数组中，您可以将更改功能从每个按钮传递给索引。

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

如果你还在挣扎，请告诉我。

如何使用JavaScript更改单击时的图像源？

3 个答案: