Ładowanie innego elementu po kliknięciu w ten sam div

pytanie zadane 30 stycznia 2021 w JavaScript przez Dariusz Hozer Użytkownik (920 p.)

Jak Klikając w container kolejno wykonać function one(), następnie po 2 kliknięciu function two() itd




   var container=document.querySelector('.container');
    var photo1=document.querySelector('.photo1');
    var photo2=document.querySelector('.photo2');
    var photo3=document.querySelector('.photo3');
 



 function one(){
        photo1.style.animation="leftphoto 1s forwards";
};
   function two(){   
        photo2.style.animation="leftphoto 1s forwards";
    };

 function three(){
        photo3.style.animation="leftphoto 1s forwards";
};
        


   photo1.addEventListener('click',one,false);
   photo2.addEventListener('click',two,false);

   photo3.addEventListener('click',three,false);


function containerclick(){

     container.addEventListener('click',one,false);

 

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body >
    


<div class="container" onclick="containerclick()">
    <div class="photo1"></div>
    <div class="photo2"></div>      
    <div class="photo3"></div>


</div>

.container{
 width: 100%;
 height: 100vh;
 margin: 0 auto;

 display: flex;
 justify-content: center;
 align-items: center;
}

.photo1,.photo2,.photo3{
 position: absolute;
width: 40%;
height: 50vh;

margin: 0 auto;
display:block;


}

.photo1{
    background-color: rgb(129, 118, 618);z-index: 3;transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.photo2{
    background-color: red;z-index: 2;
}
.photo3{

background-color: yellow;z-index:1;

}


@keyframes leftphoto {
    from{transform:translateX(0)}
    to{transform: translate(100%);opacity:0;}
}

2 odpowiedzi

odpowiedź 30 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Nie prościej będzie podpiąć się na kontener tych zdjęć i, stosując event delegation, dodawać klasę (zamiast powtarzalnie stylować inline-owo) obsługującą animację przesunięcia danego obrazka na kliknięcie?

komentarz 30 stycznia 2021 przez Dariusz Hozer Użytkownik (920 p.)

Jest prościej, Ale chciałem, żeby slajd zmieniał się po kliknięciu w myszkę a nie po kliknięciu w div)

komentarz 30 stycznia 2021 przez ScriptyChris Mędrzec (190,190 p.)

Ale event delegation pozwala obsługiwać kliknięcia (i nie tylko, bo w zasadzie każdy event, który bąbelkuje) na potomkach elementu, na którym jest podpięty listener.

odpowiedź 30 stycznia 2021 przez VBService Ekspert (256,320 p.)
edycja 30 stycznia 2021 przez VBService

Proponowane zmiany: Codepen

.container {
  width: 100%;
  height: 100vh;
  margin: 0 auto;

  display: flex;
  justify-content: center;
  align-items: center;
}

div div[class*='photo'] {
  position: absolute;
  width: 40%;
  height: 50vh;
  margin: 0 auto;
  padding: 0;

  border: 2px dotted red; /* do demonstracji */
}

/* do demonstracji */
div div[class*='photo'] img {
  position: relative;
  top: -1.1em;  
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* do demonstracji */
div div[class*='photo']:before {
  position: relative;
  top: -1em;
  content: attr(class);
  background-color: black;
  color: white;
  padding: 1em;
}

.photo1 {
  background-color: rgb(129, 118, 618);
  z-index: 3;
}
.photo2 {
  background-color: red;
  z-index: 2;
}
.photo3 {
  background-color: yellow;
  z-index:1;
}

.leftphoto-anim {
  animation: leftphoto 1s forwards;
}

@keyframes leftphoto {
  from { transform: translateX(0); }
  to { transform: translate(100%); opacity:0; }
}

const photos = document.querySelectorAll('.container div');

photos.forEach(photo => {
  photo.addEventListener('click',(e) => {
    if (!e.target.matches('.container')) {
      if (e.target && e.target.nodeName == 'IMG') {
        e.target.parentNode.style.animation = 'leftphoto 1s forwards';
      } else {
        e.target.style.animation = 'leftphoto 1s forwards';
        // e.target.classList.add('leftphoto-anim');
      }
    }
  }, false);
})