Question

我正在使用https://github.com/daneden/animate.css这个css类来为网格中的方框设置动画。如果用户点击＆＃34;华氏度到摄氏度转换＆＃34;然后用fahtocel id moves.Same为第二个框，它很好用我写的但是没有意义为每个盒子写javascript函数，有没有办法获得点击div的id并将其与有框的移动一个功能。

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

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'));

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

Answer 2

您可以将要更改的DIV的ID（作为字符串/文本）作为参数传递给函数。

HTML

onclick="bounce('fahtocel')"

的JavaScript

function bounce( elementID ){ ... }

jQuery

$('#' + elementID)

顺便说一下，我也把你的第一个DIV变成了按钮 - 不是你必须要做的事情，只是很好地使用按钮来完成需要点击的东西，而不是将功能变成DIV。 / p>

＆＃13;

function bounce( elementID ) {
  var target = $('#' + elementID );
  target.addClass("animated bounce");

  setTimeout(function() {
    target.removeClass("animated");
    target.removeClass("bounce");
  }, 1000);

  setTimeout(function(){
    genQuote( elementID );
  }, 5000);
}

function genQuote( elementID ){
  // you can pass the string for the ID to another
  // function. it's just like a variable, but you
  // need to make sure your function will send and
  // receive them as nessecary.
  $('#' + elementID ).html( new Date() );
  // this is just randomly putting in the current date
  // and time to show an update.
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <button onclick="bounce('fahtocel')">Fahrenheit to Celsius conversion</button>
  </li>
  <li>
    <button onclick="bounce('box2')">Box 2</button>
  </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>

＆＃13;

如何点击按钮ID并对具有相同ID的div进行更改？

2 个答案: