气球/图像落在点击上

Question

我有六个气球图像，当用户单击它们时，我希望每个图像都能完全停下来。我做了一些测试，但似乎没有用。我不确定自己在做什么错。当用户单击图像时，我希望javascript函数将动画类应用于摆设。当我单击图像时，似乎没有任何反应。    var elems = document.getElementsByClassName("bauble");function test(idtest) {    for(var i=0;i<elems.length;i++){         elems[i].classList.add("animation");     }}.bauble {  z-index: 3;}#red {  left: 42px;  top: 341px;}#blue {  left: 113px;  top: 226px;}#green {  left: 425px;  top: 211px;}#orange {  left: 604px;  top: 281px;}#darkblue {  left: 300px;  top: 276px;}#pink {  z-index: 1;  left: 400px;  top: 330px;}.animattion {  animation-name: bounce;  animation-fill-mode: forwards;  animation-duration: 2s;}@keyframes bounce {  from {    transform: translate3d(0, 0, 0);  }  to {    transform: translate3d(0, 500px, 0);  }  from {    transform: translate3d(0, 0, 0);  }  to {    transform: translate3d(0, 300px, 0);  }}<div id="container">  <!-- baubles -->  <img id="red" class="bauble" src="../assets/img1.png" alt="red bauble" title="red bauble" onclick="test(this.id)" />  <img id="pink" class="bauble" src="../assets/img2.png" alt="pink bauble" title="pink bauble" onclick="test(this.id)" />  <img id="green" class="bauble" src="../assets/img3.png" alt="green bauble" title="green bauble" onclick="test(this.id)" />  <img id="orange" class="bauble" src="../assets/img4.png" alt="orange bauble" title="orange bauble" onclick="test(this.id)" />  <img id="blue" class="bauble" src="../assets/img5.png" alt="blue bauble" title="blue bauble" onclick="test(this.id)" />  <img id="darkblue" class="bauble" src="../assets/img6.png" alt="darkblue bauble" title="darkblue bauble" onclick="test(this.id)" /></div>

Answer 1

我通过遍历所有球来解决它

var elems = document.getElementsByClassName("bauble");

function test(idtest) {

    for(var i=0;i<elems.length;i++){

        if(idtest=="red") {

            elems[0].classList.add("animation");

        }else if(idtest=="pink"){

            elems[1].classList.add("animation");

        }else if(idtest=="green"){

            elems[2].classList.add("animation");

        }else  if(idtest=="orange"){

            elems[3].classList.add("animation");

        }else if(idtest=="blue"){

            elems[4].classList.add("animation");

        }else if(idtest=="darkblue"){

            elems[5].classList.add("animation");

        }

     }

}