Question

我希望在父对象的焦点上从嵌套的div元素中删除一个类。然后我想用另一个具有自动播放的CSS动画替换该类。我希望在同一个类中的多个元素中执行此操作，因此它需要能够处理多个元素。我不知道该怎么办，因为我已经到达了我认为我应该在这一点，但无济于事。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<style>

<style>

  div {
  filter: opacity(0%);
  background-color: red;
  width: 300px;
  height: 300px;
  position: relative;
  top: 50%;
  left: 50%;
  z-index: 1;
}

.noGrow {

}

.grow {
  animation-name: derp;
  animation-duration: 1s;
  filter: opacity(100%);
}

@keyframes derp {
  from{width: 0px;}
    to{width: 300px;}

}

</style>

<body>
<span id="divHolder" tabindex="1">
<div class="noGrow firstDiv">
</div>
</span>


</body>
<script src="jquery.js"> </script>
<script>

var divHolder = $(".divHolder");
var firstDiv = $(".firsDiv");

divHolder.focus(function () {
  if($(".firstDiv").hasClass("noGrow")){
    $(this).removeClass("noGrow");
    $(this).addClass("grow");
    console.log("It's working.");
  }
});

</script>

</html>

感谢您的帮助。非常感谢。

Answer 1

看看你的代码，这两行似乎是问题所在：

 $(this).removeClass("noGrow");
 $(this).addClass("grow");

$（this）引用您将焦点事件绑定到的divHolder元素。如果您想更改firstDiv的类，您需要将行更改为：

firstDiv.removeClass('noGrow');
firstDiv.addClass('grow');

但是，基于你的CSS，我建议使用toggleClass，并完全关闭noGrow类。你的div成为：

<div class="firstDiv"></div>

你的JS成了：

divHolder.focus(function () {
    firstDiv.toggleClass('grow');
    console.log('growing!');
});

最后，如果您不知道后代名单中的哪个位置，那么您的成长能力是多少？ div将是，你可以使用像find（）：

divHolder.focus(function(){
    $(this).find('div').toggleClass('grow');
    // if the div is given an id like #growable we can do this:
    // $(this).find('#growable').toggleClass('grow');
});

如何在父元素中的嵌套元素上调用CSS动画？

1 个答案: