Попытка переключить изображения с помощью переключателя в vanilla JS - PullRequest
Новая
       125

Попытка переключить изображения с помощью переключателя в vanilla JS

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

Я не совсем понимаю, почему мой код не работает на данный момент. Пытаюсь сделать кнопку лайка в Instagram. У меня есть изображение черного сердца, и при двойном щелчке по нему я хочу переключить его на другое изображение красного сердца. Я покопался здесь и там, но не смог точно указать на проблему. Фрагмент кода работает, но не работает, когда я запускаю его в своем проекте. 

const button = document.querySelector('#like');

document.querySelector('button').addEventListener('dblclick', (e) => {
    if (button.src == "https://www.w3schools.com/html/img_chania.jpg") {
        button.src = "https://www.w3schools.com/html/pic_trulli.jpg";
    } else {
        button.src = "https://www.w3schools.com/html/img_chania.jpg";
    }
});
.under-image-nav button {
    border: none;
    width: 30px;
}
<nav class="under-image-nav">
    <button><img id="like" src="https://www.w3schools.com/html/img_chania.jpg" alt="like button">           </button>
</nav>

Ответы [ 2 ]

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

Я избавился от кнопки и просто разрешил javascript управлять источником изображения.

Чтобы сократить код, я использовал тернарный оператор 

let heartEl = document.querySelector(".heart");
const fullHeart = 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Ffrogermcs.github.io%2Fimages%2F6%2Fheart_red.png&f=1&nofb=1"'
const emptyHeart = 'https://freeiconshop.com/wp-content/uploads/edd/heart-outline.png'

heartEl.addEventListener("dblclick", () => {
  heartEl.src ==  emptyHeart ? heartEl.src = fullHeart : heartEl.src = emptyHeart
});
<img class='heart' src='https://freeiconshop.com/wp-content/uploads/edd/heart-outline.png'>
0 голосов
/ 06 августа 2020

Вместо этого вы должны прикрепить прослушиватель событий к кнопке. 

const img = document.querySelector('#like');

document.querySelector('button').addEventListener('dblclick', (e) => {
    if (img.src == "https://www.w3schools.com/html/pic_trulli.jpg") {
        img.src = "https://www.w3schools.com/html/img_chania.jpg";
    } else {
        img.src = "https://www.w3schools.com/html/pic_trulli.jpg";
    }
});
<button><img id="like" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="like button" width="100" height="100"></button>
...