如何一次将类添加到一个 div Jquery答案

【问题标题】：how to add class to one div at a time Jquery如何一次将类添加到一个 div Jquery
【发布时间】：2018-09-03 20:04:22
【问题描述】：

当用户将鼠标悬停在父元素上时，我想使用 jquery hover() 一次将一个元素添加到一个元素，而不是所有具有 .animated 类的元素。

$(document).ready(function(){
    $(".animateDiv").hover(function() {
      $('.animated').addClass('rubberBand');
    }, function() {
      $('.animated').removeClass('rubberBand');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="animateDiv">
  <h3 class="animated">Turn up summer.</h3>
  <h4>Box 1</h4>
</div>
    
<div class="animateDiv">
  <h3 class="animated">Turn up summer.</h3>
  <h4>Box 2</h4>
</div>

<div class="animateDiv">
  <h3 class="animated">Turn up summer.</h3>
  <h4>Box 3</h4>
</div>

<div class="animateDiv">
  <h3 class="animated">Turn up summer.</h3>
  <h4>Box 4</h4>
</div>

那么再次......当用户悬停时，我如何将类一次仅应用于一个框？

【问题讨论】：

$('.animated', this).addClass('rubberBand');
+ 最好是 toggleClass();

标签： javascript jquery html css animate.css

【解决方案1】：

$('.animated', this).addClass('rubberBand');

【讨论】：

【解决方案2】：

或者你可以保持简短（呃）。除非您计划有不同的输入和输出，否则无需扩展悬停。

$(document).ready(function(){
   $(".animateDiv > .animated").hover(function() { $(this).toggleClass('rubberBand');});
});

【讨论】：

【解决方案3】：

$(this) 范围将使其仅限于悬停的 div。这也假设.animated 在.animatedDiv 内。

$(document).ready(function(){
  $(".animateDiv").hover(function() {
    $(this).find('.animated').addClass('rubberBand');
  }, function() {
    $(this).find('.animated').removeClass('rubberBand');
  });
});

【讨论】：

【解决方案4】：

你可以这样使用

    <div class="animateDiv">
      <h3 class="animated">Turn up summer.</h3>
      <h4>Box 1</h4>
    </div>


    <div class="animateDiv">
      <h3 class="animated">Turn up summer.</h3>
      <h4>Box 2</h4>
    </div>

    <div class="animateDiv">
      <h3 class="animated">Turn up summer.</h3>
      <h4>Box 3</h4>
    </div>

    <div class="animateDiv">
      <h3 class="animated">Turn up summer.</h3>
      <h4>Box 4</h4>
    </div>

jQuery

    <script>
    $(document).ready(function(){
        $('.animateDiv').hover(function(){
            $(this).find('.animated').addClass('rubberBand')
            $(this).siblings().find('.animated').removeClass('rubberBand')
        })
     });
    </script>

【讨论】：