Попеременно выводить елементы DOM на экран

Question

Есть следующий код

<h1 onclick="showCard(event)">img1</h1>
<h1 onclick="showCard(event)">img2</h1>
<div class="images" id="img1"><img/></div>
<div class="images" id="img2"><img/></div>


.images {
   position: absolute;
   top: 50%;
   left: 100%;
}


let imgs = {
   'img1': document.querySelector('#img1'),
   'img2': document.querySelector('#img2')
}

function showCard(e) {
    if (imgs[e.target.innerText.toLowerCase()].id === e.target.innerText.toLowerCase()) {
        imgs[e.target.innerText.toLowerCase()].style.left = '50%'
    } else {
        imgs[e.target.innerText.toLowerCase()].style.left = '100%'
    }
}

Задача стоит в следующем: не могу корректно написать логику, чтобы при нажатии на img1 с экрана уходила img2 и наоборот. Сейчас код работает следующим образом: при нажатии на img1 выходит первая картинка, при нажатии на img2 выходит вторая картинка, но первая остается под ней, а необходимо сделать так, чтобы при выходе второй картинки первая уходила за границы экрана.

Подскажите, пожалуйста, как подправить код. Или может есть инные варианты исполнения. Спасибо

Answer 1

Предлагаю сделать это более универсально, для этого:

отображаемому img добавьте класс индикатор (пример: class="show")
в функцию showCard(nextImgId) передавайте id картинки для отображения
в функцие showCard(nextImgId), находите элемент с классом "show" и удаляете его, находите элемент с id=nextImgId и ему добавляете класс "show"
в css для img добавить стиль left=100% а для img.show left=50%

так же анимации можно добавить плавности с помощью transition

Answer 2

Вместо <div> подставте в код свои картинки.

let red = document.querySelector('div.red'),
    green = document.querySelector('div.green'),
    onclick = () => { 
      red.classList.toggle('show');
      green.classList.toggle('show');
    };
    
red.addEventListener('click', onclick, false);
green.addEventListener('click', onclick, false);

body{padding:0;margin:0;}
.red {left:-100%;background:red;}
.green {left: 100%;background:green;}
.red,.green{position:absolute;width:100vw;height:100vh;transition:left .2s;}
.show{left:0;display:block;}

<div class="red show"></div>
<div class="green"></div>

БЛОГ НА HUSL

Попеременно выводить елементы DOM на экран

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