Делегирование события - триггер события с неправильным классом - PullRequest
Новая
       30

Делегирование события - триггер события с неправильным классом

0 голосов
/ 16 сентября 2018

Я пытаюсь создать слайдер с помощью html-vanilla javascript. Я могу открыть модал, показать широкое изображение слайдера и маленькие картинки (миниатюры). Все выглядит хорошо, но когда я нажимаю на миниатюры (которые имеют класс small_image), они запускают события, меняют изображение и снова добавляют те же изображения в раздел миниатюр.

Я проверил консоль с помощью console.log(e.target.className), когда щелкнул по любой из миниатюр, и она показывает класс «слайдер», а не класс «small_image». Почему это происходит и как я могу это исправить?

Раздел HTML 

<div id="photos" class="tabcontent">
    <div class="tabslider">
        <div>
            <img src="{{image_path("posts/5-1537128615.jpg")}}" class="slider">
        </div>
        <div>
            <img src="{{image_path("posts/6-1537128615.jpg")}}" class="slider">
        </div>
        <div>
            <img src="{{image_path("posts/7-1537128615.jpg")}}" class="slider">
        </div>
        <div>
            <img src="{{image_path("posts/8-1537128615.jpg")}}" class="slider">
        </div>
        <div id="myModal" class="modal">
            <span class="close cursor">&times;</span>
            <div class="modal-content">
              <!-- wide image -->
                <div class="mySlides">
                    <img class="show_slider" src="">
                </div>
              <!-- small images -->
                <div class="small_images"></div>

            </div>
        </div>
    </div>

</div>

Раздел Javascript 

document.querySelector(".tabslider").addEventListener("click", function (e) {
    if (e.target.className = "slider") {
        let smallImages = document.querySelector(".small_images"),
            images = document.querySelectorAll(".slider"),
            slider = document.querySelector(".show_slider"),
            sliderDiv = document.querySelector(".mySlides"),
            model = document.querySelector("#myModal");

        model.style.display = "block";

        images.forEach(function (image) {
            let img = Elementor.create("img", {"src": image.src, "class": "small_image"}),
                div = Elementor.create("div", {"class": "columnlightbox"},);
            div.appendChild(img);
            smallImages.appendChild(div);
        });

        slider.setAttribute("src", e.target.src);
        sliderDiv.style.display = "block";
    }
})

1 Ответ

0 голосов
/ 16 сентября 2018 
e.target.className = "slider"

Вы устанавливаете значение здесь, не сравнивая: D

...