如何在 Javascript 中單擊時插入圖像？

Question

所以我是 JavaScript 的新手，我有一個列表，當單擊該列表項時，我希望顯示一個圖像，並且僅在單擊它時出現。 我怎樣才能通過我的 JS 文檔做到這一點？ 我繼續為我可以用於我的 JS 的列表文檔之一制作了一個 ID。

<div class="tab-pane active full" id="status" role="tabpanel">
  <ul class="item-list">
    <li><a id="pipboy_gun_img" href="#" class="44_pistol">.44 Pistol</a></li>
    <li><a href="#" class="10mm_pistol">10mm Pistol</a></li>
    <li><a href="#" class="assault_rifle">Assault Rifle</a></li>
  </ul>

Answer 1

在 javascript 中，如果將事件偵聽器應用於父元素，則它的所有子元素也會偵聽該事件。 因此，您可以將點擊事件應用於<ul> 。 所以所有的<li>項目都在監聽那個事件。 然后使用 switch case 在不同的點擊事件之間進行切換。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    
    document.addEventListener('DOMContentLoaded' , function(){
        var list = document.getElementById('allList');
        var image = document.getElementById('targetImg');

        list.addEventListener('click' , function(e){

            switch(e.target.textContent){
                case '44 Pistol':
                    image.setAttribute("src" , "https://www.pewpewtactical.com/wp-content/uploads/2019/12/8.-Glock-44-.22LR.jpg");
                    break;
                case '10mm Pistol':
                    image.setAttribute("src" , "https://www.airgundepot.com/vault/wp-content/uploads/2016/08/Other-Pistol-Options.jpg");
                    break;
                case 'Assault Rifle':
                    image.setAttribute("src" , "https://images-na.ssl-images-amazon.com/images/I/819LnIT7GSL._AC_SL1500_.jpg");
                    break;
                default:
                    break;
            }
        })
    })
    
</script>
<body>
    <div class="tab-pane active full" id="status" role="tabpanel">
        <ul class="item-list" id="allList">
          <li><a id="pipboy_gun_img" href="#" class="44_pistol">44 Pistol</a></li>
          <li><a href="#" class="10mm_pistol">10mm Pistol</a></li>
          <li><a href="#" class="assault_rifle">Assault Rifle</a></li>
        </ul>
        <img height="400px" width="400px" id="targetImg" src="" alt="">
</body>
</html>

旁注：如果您想知道這個DOMContentLoaded是什么，它會阻止 javascript 部分在 HTML DOM 加載之前執行。 如果您不想使用它，只需將<script> **your java script code ** </script>剪切並粘貼到body tag下方。

如何在 Javascript 中單擊時插入圖像？

問題描述

1 個解決方案

解決方案1
1 已采納 2020-08-01 18:07:38

如何在 Javascript 中單擊時插入圖像？

問題描述

1 個解決方案

解決方案1 1 已采納 2020-08-01 18:07:38

解決方案1
1 已采納 2020-08-01 18:07:38