气球/图像落在点击上

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) {&nbsp; &nbsp; for(var i=0;i<elems.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; if(idtest=="red") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elems[0].classList.add("animation");&nbsp; &nbsp; &nbsp; &nbsp; }else if(idtest=="pink"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elems[1].classList.add("animation");&nbsp; &nbsp; &nbsp; &nbsp; }else if(idtest=="green"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elems[2].classList.add("animation");&nbsp; &nbsp; &nbsp; &nbsp; }else&nbsp; if(idtest=="orange"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elems[3].classList.add("animation");&nbsp; &nbsp; &nbsp; &nbsp; }else if(idtest=="blue"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elems[4].classList.add("animation");&nbsp; &nbsp; &nbsp; &nbsp; }else if(idtest=="darkblue"){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elems[5].classList.add("animation");&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;}}