$ (this) .closest не работает при добавлении в скрипт - PullRequest
Новая
       12

$ (this) .closest не работает при добавлении в скрипт

0 голосов
/ 02 июля 2018

Здравствуйте, у меня есть очень простой скрипт, который перемещает дочерний элемент <img> в его родительский элемент <label>, когда вы наводите и выключаете элемент <label>.

Проблема в том, если вы наводите курсор на одну метку. ВСЕ изображения под ВСЕМИ ярлыками перемещаются .. Это я не хочу. Я попытался решить эту проблему, добавив $(this).closest к моей функции. Но когда код $(this).closest добавлен, он ломается. Если вы удалите (this) .closest из моего кода, он будет работать нормально, но это повлияет на все из них, а не на наведение одного.

HTML 

<div class="checkbox-cover images-true">
<div>
<label> <img></img> </label>
<label> <img></img> </label>
<label> <img></img> </label>
<label> <img></img> </label>
</div>
</div>

JQuery 

$(".checkbox-cover.images-true>div>label").hover(
    function () {
        $(this).closest('img').stop().animate({top: '-200px'});
    }, function (){
        $(this).closest('img').stop().animate({top: '0'});        
});

Ответы [ 2 ]

0 голосов
/ 02 июля 2018

Поскольку img является здесь дочерним элементом label, а closest используется для получения ближайшего родителя, соответствующего селектору. Попробуйте вместо этого: 

$(".checkbox-cover.images-true>div>label").hover(
  function() {
    $('img', this).stop().animate({top: '-200px'});
  },
  function() {
    $('img', this).stop().animate({top: '0'});
  }
);

Кроме того, вы можете достичь этого только с помощью CSS, например: 

.images-true label img {
  position: relative;
  transition: all 1s ease 0s;
  top: 0;
}

.images-true label:hover img {
  top: -200px;
}
<div class="checkbox-cover images-true">
  <div>
    <label> <img src="http://via.placeholder.com/100x100"></img> </label>
    <label> <img src="http://via.placeholder.com/100x100"></img> </label>
  </div>
</div>

Просто хотел, чтобы вы знали об этом и оставляли все ваши варианты открытыми.

0 голосов
/ 02 июля 2018

closest ищет дерево DOM, идущее вверх (предки), а не вниз (потомки), то, что вы действительно хотите, это find вместо. 

$(".checkbox-cover.images-true > div > label").hover(
    function () {
        $(this).find('> img').stop().animate({top: '-200px'});
    }, function () {
        $(this).find('> img').stop().animate({top: '0'})
    });        
});

Наконец, как показывают комментарии, вы можете сократить $(this).find('> img') с помощью $('img', this), установив параметр "context".

...