如何更改 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

如果您正在使用 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 2

我可能会尝试做的是将 id 分配给容器 div 并设置 CSS 以便 div 的背景是您的图像想要，同样你可以用js改变CSS background prop。

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

从这里您可以使用 js 抓取 div 并让您的点击功能执行更改图像的相同任务，但它将通过更改背景图像属性来完成此操作CSS.

中的 div

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

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)，老虎change(1)，熊change(2)。狮子、老虎和熊，我的天啊...如果您的图像路径正确，您应该会看到一些切换。

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

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

How can I change the image source on click with JavaScript?

javascript

image

src