Странное поведение onclick

Question

let prevSlide=document.querySelectorAll('.prev-slide')
let nextSlide=document.querySelectorAll('.next-slide')
let maskImg=document.querySelectorAll('.maskImg')
for(let i=0;i<nextSlide.length;i++){
    prevSlide[i].onclick=()=>{
        maskImg[i].style.transform="translateX("+(Number(maskImg[i].style.transform.match(/\-\d+|\d+/)[0])+100)+"%)"
    }
    nextSlide[i].onclick=()=>{
        maskImg[i].style.transform="translateX("+(Number(maskImg[i].style.transform.match(/\-\d+|\d+/)[0])-100)+"%)"
    }
}

Фактически при click'е по prev/nextSlide'у функция не отрабатывает. console.log(event) показывает что onclick регистрируется правильно. Вызов функции вручную prev/nextSlide[i].onclick() обрабатывается корректно.

Как это выглядит: https://youtu.be/1j5Ixj5BbAo https://jsfiddle.net/besupremebeing/3tb6sw84/5/

Answer 1

Судя по всему, каждый hallImgContainer это у вас мини галарея, которая открывается по клику по ней. Но прежде чем работать с множеством галерей, проверьте, работает ли одна. Из того, что я вижу, по вашему коду:

вы даёте свойство транслэйтХ, не картинкам а их контэйнеру, а лучше дать картинкам.
При клике, картинки уезжают в стороны, но смещение с каждым кликом растёт и не останавливается, а лучше бы после смещения на + или - 300%, возвращать картинки в изначальное положение.

Ниже пример на одной галерее, который работает. Чтобы было наглядно, я убрал оверфлоу хидден и для стрелок поставил з-индексы, чтобы они были сверху.Вот теперь, можно адаптировать этот код, под большее количество галерей.

  let elem=document.querySelector('.hallImgContainer');
    let maskImg=document.querySelector('.maskImg');
    let prevSlide=document.querySelector('.prev-slide');
    let nextSlide=document.querySelector('.next-slide');
    let imgS = document.getElementsByTagName('img')
  
        prevSlide.addEventListener('click', ()=>{
        for(let img of imgS){
        if(img.style.transform === "translateX(-300%)"){
                img.style.transform = "translateX(0%)"
                }
         img.style.transform="translateX(" + (Number(img.style.transform.match(/\-\d+|\d+/))-100) + "%)";
               

        }
        

        })
           
        nextSlide.addEventListener('click', ()=>{
       
             for(let img of imgS){
             if(img.style.transform === "translateX(200%)"){
                img.style.transform = "translateX(-100%)"
                }
         img.style.transform="translateX("+(Number(img.style.transform.match(/\-\d+|\d+/))+100)+"%)";
        console.log(img.style.transform)
        }
        })

        elem.onclick=()=>{
            elem.classList.add('scroll');
            maskImg.style.width=maskImg.querySelector('img').width+'px';
            maskImg.style.transform="translateX(0%)";
            if(event.target.parentNode!=elem){
                elem.classList.remove('scroll');
                maskImg.style.removeProperty('width');
                maskImg.style.removeProperty('transform');
            }
        }

.hallImgContainer img {
    max-width: 100%;
    align-self: center;
}
.hallImgContainer {
    width: 100px;
    position: relative;
    overflow: hidden;
    border-radius: 0.2vw;
}
.hallImgContainer::before {
    position: absolute;
    content: "";
    top: 0;
    background: rgb(255 255 255 / 60%);
    height: 5vw;
    width: 100%;
    left: 0;
    transition: height 0.5s;
}

.hallImgContainer::after {
    position: absolute;
    content: "";
    bottom: 0;
    background: rgb(255 255 255 / 60%);
    height: 5vw;
    width: 100%;
    z-index: 1;
    left: 0;
    transition: height 0.5s, bottom 0.5s;
}

.hallImgContainer:hover::before {height: 100%;background: rgb(255 255 255 / 57%) url(img/icons/zoom.svg);background-repeat: no-repeat;background-position: center center;box-shadow: unset;background-size: 10vw;}

.hallImgContainer:hover::after {
    bottom: -100%;
}

.hallImgContainer:hover {
    cursor: pointer;
}
.scroll {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    background: rgb(0 0 0 / 90%);
}
.scroll::before,
.scroll::after,
.scroll:hover::after,
.scroll:hover::before {
    all: unset;
}
.prev-slide,
.next-slide {
    display: none;
}
.scroll .prev-slide,
.scroll .next-slide {
    position: absolute;
    cursor: pointer;
    top: 50%;
    color: #ffffffa3;
    display: flex;
    font-size: 8.2vw;
    transform: translateY(-50%);
    transition: all 0.2s;
    z-index: 10000
}
.scroll .prev-slide {
    border-top-left-radius: 10vw;
    border-bottom-left-radius: 10vw;
    left: 3vw;
}
.scroll .next-slide {
    border-top-right-radius: 10vw;
    border-bottom-right-radius: 10vw;
    right: 3vw;
}
.scroll .prev-slide:hover,
.scroll .next-slide:hover {
    color: #fff;
}
.scroll img {
    max-height: 90%;
}
.mask {
    position: absolute;
    width: 100%;
    height: 100%;
}
.scroll .mask {
    display: none;
}
.img {
    display: flex;
    //overflow: hidden;
}
.maskImg {
    display: flex;
    transition: all 0.5s;
}
.main {
display: flex;
}

<div class="main">
  <div class="hallImgContainer">
                <div class="mask"></div>
                <i class="prev-slide">&#x2190;</i>
                <i class="next-slide">&#x2192;</i>
                <div class="img">
                    <div class="maskImg">
                        <img src="https://lh5.googleusercontent.com/-2L-kqFKzZO0/AAAAAAAAAAI/AAAAAAAAAEo/zbZn5PxnyEo/photo.jpg" alt="">
                        <img src="https://lh5.googleusercontent.com/-2L-kqFKzZO0/AAAAAAAAAAI/AAAAAAAAAEo/zbZn5PxnyEo/photo.jpg" alt="">
                        <img src="https://lh5.googleusercontent.com/-2L-kqFKzZO0/AAAAAAAAAAI/AAAAAAAAAEo/zbZn5PxnyEo/photo.jpg" alt="">
                    </div>
                </div>
            </div>
            
</div>

БЛОГ НА HUSL

Странное поведение onclick

Ответы (1 шт):