仅针对另一个 Class 在同一个 Parent 与 Jquery

Question

我试图通过悬停另一个具有相同 parent 的元素来仅影响一个 class。有许多 parents/elements 具有相同的 class 名称，我只需要在每个中定位一个来实现悬停效果。我正在尝试使用 .find()，但由于某种原因它不起作用。如果我不使用 .find()，它会开始定位页面上的所有“.team-title”class 元素。

<div class="team-parent">
  <div class="team-memeber"></div>
  <div class="team-title"></div>
</div>

<div class="team-parent">
  <div class="team-member"></div>
  <div class="team-title"></div>
</div>

<div class="team-parent">
  <!-- ... -->
</div>

$(".team-member").hover(function() {
  $("this").find(".team-title").animate({"marginLeft": "15px"}, 400);
}, function() {
  $("this").find(".team-title").animate({"marginLeft": "0px"}, 400);
});

Answer 1

首先你需要使用 this 作为关键字，而不是字符串。其次 find() 用于定位子元素，而您要定位的元素是兄弟元素，因此您可以使用 next()，如下所示：

$(".team-member").hover(function() {
  $(this).next(".team-title").animate({
    "marginLeft": "15px"
  }, 400);
}, function() {
  $(this).next(".team-title").animate({
    "marginLeft": "0px"
  }, 400);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team-parent">
  <div class="team-member">Member 1</div>
  <div class="team-title">Team 1</div>
</div>
<div class="team-parent">
  <div class="team-member">Member 2</div>
  <div class="team-title">Team 2</div>
</div>

也就是说，这里不需要 JS，因为您可以在 CSS:

中更有效地完成您想要实现的目标

.team-title {
  margin-left: 0;
  transition: margin 0.4s;
}

.team-member:hover + .team-title {
  margin-left: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team-parent">
  <div class="team-member">Member 1</div>
  <div class="team-title">Team 1</div>
</div>
<div class="team-parent">
  <div class="team-member">Member 2</div>
  <div class="team-title">Team 2</div>
</div>

仅针对另一个 Class 在同一个 Parent 与 Jquery

Targeting Only One Other Class Within the Same Parent With Jquery

jquery

html

jquery-hover