e.target.src изменить только на первое изображение - PullRequest
Новая
       8

e.target.src изменить только на первое изображение

0 голосов
/ 15 октября 2018

У меня есть два раздела, первый раздел имеет пару изображений, а второй раздел имеет только одно изображение, и его отображение установлено как none.

При наведении курсора на эти изображения, я хочу изменить srcединственное изображение src помещает свое единственное изменение в первое изображение

Javascript: 

 function gridHover() {
    const gridImages = document.querySelectorAll('.grid figure img');
    gridImages.forEach(function(picture){
        picture.addEventListener('mouseover', (e)=>{
            const thumbnails = document.querySelector('.thumbnails');
            thumbnails.style.display = 'block';
            thumbnails.src = e.target.src;
            console.log(e.target.src);
        })
    })
}
gridHover();

HTML 

    <section class="grid-container">
        <div class="grid-title">
            <h1>After August</h1>
        </div>
        <div class="grid">
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_01.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_02.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_03.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_04.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_05.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_06.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_07.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_08.jpg" alt="">
                </figure>
            </article>
            <article>
                <figure>
                    <img src="../assets/media/images/after-august/after-august_09.jpg" alt="">
                </figure>
            </article>
        </div>
    </section>


    <section class="thumbnails">
        <img src="../assets/media/images/after-august/after-august_01.jpg" alt="">
    </section>

Не знаю, что не так, мой код выглядит нормально.Я попытался console.log (e.target.src), и он обычно дает мне реальные изображения.

1 Ответ

0 голосов
/ 15 октября 2018

выберите img внутри класса миниатюр в переменной const thumbnails. 

function gridHover() {
        const gridImages = document.querySelectorAll('.grid figure img');
        gridImages.forEach(function(picture){
            picture.addEventListener('mouseover', (e)=>{
                const thumbnails = document.querySelector('.thumbnails img');
                thumbnails.style.display = 'block';
                thumbnails.src = e.target.src;
                console.log(e.target.src);
            })
        })
    }
    gridHover();
...