Как я могу вставить картинку по клику в Javascript? - PullRequest
Новая
       2

Как я могу вставить картинку по клику в Javascript?

0 голосов
/ 01 августа 2020

Итак, я новичок в JavaScript, и у меня есть список, и при щелчке по этому элементу списка я хочу, чтобы изображение появлялось, и только при щелчке по нему. Как я могу go сделать это с помощью моего JS документа? Я пошел дальше и сделал идентификатор для одного из моих документов списка, который я могу использовать для своего JS. 

<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>

1 Ответ

1 голос
/ 01 августа 2020

В javascript, если вы применяете прослушиватель событий к родительскому элементу, все его дочерние элементы также прослушивают это событие. Таким образом, вы можете применить событие щелчка к <ul>. Итак, все элементы <li> прослушивают это событие. Затем используйте случай переключения для переключения между различными событиями щелчка. 

<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.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...