如何使用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