Ориентация только на один другой класс в пределах одного и того же родителя с Jquery - PullRequest
Новая
       26

Ориентация только на один другой класс в пределах одного и того же родителя с Jquery

1 голос
/ 11 июня 2019

Я пытаюсь повлиять только на один класс, наводя другой элемент на одного и того же родителя. Есть много родителей / элементов с одинаковыми именами классов, и мне нужно настроить таргетинг только на одного внутри каждого, чтобы реализовать эффект наведения. Я пытаюсь использовать .find (), но по какой-то причине это не работает. И если я не использую .find (), он начинает нацеливаться на все элементы класса ".team-title" на странице. 

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

1 Ответ

1 голос
/ 11 июня 2019

Во-первых, вам нужно использовать 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>
...