javascript - 如何单击按钮 ID 并在具有相同 ID 的 div 上进行更改？

Question

我正在使用 https://github.com/daneden/animate.css这个 css 类为网格中的框设置动画。如果用户单击“华氏度到摄氏度转换”，则带有 fahtocel id 的框会移动。第二个框也一样，我写的效果很好，但是为它编写 javascript 函数毫无意义每个盒子，有没有办法获取点击的 div 的 ID 并将其与必须在一个函数中移动的盒子相关联。

function bounce() {
  $("#fahtocel").addClass("animated bounce");

  setTimeout(function() {
    $("#fahtocel").removeClass("animated");
    $("#fahtocel").removeClass("bounce");
  }, 1000);

  setTimeout(genQuote(), 5000);
}

function bounce2() {
  $("#box2").addClass("animated bounce");

  setTimeout(function() {
    $("#box2").removeClass("animated");
    $("#box2").removeClass("bounce");
  }, 1000);

  setTimeout(genQuote(), 5000);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div style="cursor: pointer;" onclick="bounce()">Fahrenheit to Celsius conversion</div>
  </li>
  <li>
    <div style="cursor: pointer;" onclick="bounce2()">Box 2</div>
  </li>
  <li>Lorem 3</li>
</ul>

<div class="row">
  <div class="col-md-4 box" id="fahtocel">
    <div class="inner"> </div>
  </div>

  <div class="col-md-4 box" id="box2">
    <div class="inner"></div>
  </div>

Answer 1

你可以制作这个函数，需要的时候调用它两次:

function bounceBox($box){

   $box.addClass("animated bounce");

   setTimeout(function(){
      $box.removeClass("animated");
      $box.removeClass("bounce");
   }, 1000);
   setTimeout(genQuote, 5000);
}

bounceBox($('#fahtocel'));
bounceBox($('#box2'));

可能还有更多的事情可以做，但您没有显示它的代码。