Question

我想使用jquery hover（）一次将Class（“ animated”）添加到一个元素，而不是当用户将鼠标悬停在父元素上时，所有具有.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>

再说一次...当用户徘徊时，如何将类仅应用于一个框？

Answer 1

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

Answer 2

$(this)范围将其限制为悬停的div。这也假设.animated在.animatedDiv之内。

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

Answer 3

您可以这样使用

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'dev' ]
2 info using npm@6.4.1
3 info using node@v10.9.0
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle @~predev: @
6 info lifecycle @~dev: @
7 verbose lifecycle @~dev: unsafe-perm in lifecycle true
8 verbose lifecycle @~dev: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/media/disks/Development/dev_lab_gen/exim_pos/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/local/games:/usr/games
9 verbose lifecycle @~dev: CWD: /media/disks/Development/dev_lab_gen/exim_pos
10 silly lifecycle @~dev: Args: [ '-c', 'encore dev' ]
11 silly lifecycle @~dev: Returned: code: 126  signal: null
12 info lifecycle @~dev: Failed to exec dev script
13 verbose stack Error: @ dev: `encore dev`
13 verbose stack Exit status 126
13 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at EventEmitter.emit (events.js:182:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:182:13)
13 verbose stack     at maybeClose (internal/child_process.js:961:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:250:5)
14 verbose pkgid @
15 verbose cwd /media/disks/Development/dev_lab_gen/exim_pos
16 verbose Linux 4.9.0-8-amd64
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "dev"
18 verbose node v10.9.0
19 verbose npm  v6.4.1
20 error code ELIFECYCLE
21 error errno 126
22 error @ dev: `encore dev`
22 error Exit status 126
23 error Failed at the @ dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 126, true ]

jQuery

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

Answer 4

或者您可以使其更短。除非您计划使用不同的输入和输出，否则无需将鼠标悬停。

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

如何一次将类添加到一个div

4 个答案: