JQuery addClass только для следующего определенного элемента - не все на странице
Я использую jQuery для анимации скрытого элемента (описания изображения), чтобы он отображался при наведении курсора на изображение.
Я использую фрагмент кода, который нашел. Он работает, но делает все скрытые описания изображений на странице видимыми одновременно. Я хотел бы, чтобы только соответствующий был жизнеспособным.
Я пытался заставить $(this) и next() работать, не полностью понимая, как это работает.
var item = $('p.image-description');
$('.popup-image').hover(
function () {
item.addClass('is-visible');
setTimeout(function () {
item.addClass('is-open');
}, 20);
},
function () {
item.removeClass('is-open');
item.one('transitionend', function (e) {
item.removeClass('is-visible');
});
}
);.masonry-entry .popup-image p.image-description {
display: none;
opacity: 0;
transition: all 0.3s linear;
}
.masonry-entry .popup-image p.image-description.is-visible {
display: block;
}
.masonry-entry .popup-image p.image-description.is-open {
margin-left: 0px;
opacity: 1;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "masonry-entry">
<a class = "popup-image" href = "http://lorempixel.com/400/200/">
<img src = "http://lorempixel.com/400/200/" />
<p class = "image-description">Text here</p>
</a>
</div>
<div class = "masonry-entry">
<a class = "popup-image" href = "http://lorempixel.com/400/200/">
<img src = "http://lorempixel.com/400/200/" />
<p class = "image-description">Text here</p>
</a>
</div>
<div class = "masonry-entry">
<a class = "popup-image" href = "http://lorempixel.com/400/200/">
<img src = "http://lorempixel.com/400/200/" />
<p class = "image-description">Text here</p>
</a>
</div>Я хотел бы навести курсор на «.popup-image» и увидеть только соответствующее «p.image-description». Не все "p.image-description" есть на странице.
Ответы 3
Вы получаете коллекцию .image-description со строкой:
var item = $('p.image-description');
Всякий раз, когда вы работаете с «элементом», например, добавляя класс «является видимым», вы применяете его ко всем элементам в коллекции. Было бы лучше думать о том, что у вас есть сейчас, как о предметах, а не о предметах.
Вам нужно использовать $(this) для работы с наведенным элементом и найти «описание изображения», из которого вы хотите добавить/удалить классы.
Пример:
$('.popup-image').hover(function () {
var imageBeingHovered = $(this); // verbosity purely for explanatory purposes
var imageBeingHoveredDescription = imageBeingHovered.find('.image-description'); // see above - you don't need this many variables, they're solely for clarity.
imageBeingHoveredDescription.addClass('is-visible');
setTimeout(function () {
imageBeingHoveredDescription.addClass('is-open');
}, 20);
}, function () {
var description = $(this).find('.image-description'); // shortening for simplicity at this point.
description.removeClass('is-open');
description.one('transitionend', function () {
description.removeClass('is-visible');
});
});
Я обновил свой ответ. Событие transitionend продолжало срабатывать, потому что я использовал on вместо one.
Я, наверное, должен был начать с вопроса: вы уверены, что вам вообще нужен JS для этого? Рассматривали ли вы использование видимости + непрозрачности для достижения того же эффекта без какого-либо JS. Вот очень быстрый и грубый пример, который я собрал на основе вашего кода: codepen.io/anon/pen/voOPwp
ДА! Это намного лучше! Спасибо за помощь. Я пошел по маршруту JS только потому, что не мог анимировать от display:none; до display:block;. Спасибо еще раз.
можно попробовать $('#my-element').next().first().addClass('my-class');.
Он добавил var item = $('p.image-description'); в качестве первой строки JS. Было бы неплохо объяснить, почему ваш код работает и как он/она может использовать его, чтобы заставить его работать.
используйте this для отображения конкретного элемента и find для поиска image-description
var item = '';
var timeOut = 0;
$('.popup-image').hover(
function (e){
item = $(this).find(' p.image-description');
item.addClass('is-visible');
timeOut = setTimeout(function () {
item.addClass('is-open');
}, 20);
},
function() {
item = $(this).find(' p.image-description');
item.removeClass('is-open');
item.one('transitionend', function(e) {
item.removeClass('is-visible');
});
clearTimeout(timeOut);
}
);.masonry-entry .popup-image p.image-description{
display: none;
opacity: 0;
transition: all .3s linear;
}
.masonry-entry .popup-image p.image-description.is-visible {
display: block;
}
.masonry-entry .popup-image p.image-description.is-open {
margin-left: 0px;
opacity: 1;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "masonry-entry">
<a class = "popup-image" href = "http://lorempixel.com/400/200/">
<img src = "http://lorempixel.com/400/200/" />
<p class = "image-description">Text here</p>
</a>
</div>
<div class = "masonry-entry">
<a class = "popup-image" href = "http://lorempixel.com/400/200/">
<img src = "http://lorempixel.com/400/200/" />
<p class = "image-description">Text here</p>
</a>
</div>
<div class = "masonry-entry">
<a class = "popup-image" href = "http://lorempixel.com/400/200/">
<img src = "http://lorempixel.com/400/200/">
<p class = "image-description">Text here</p>
</a>
</div>Спасибо за это, это именно то, что я пытался решить. Я не мог понять правильное использование &(this) с переменной. Спасибо за ваше время.
Я только что нашел проблему, и я не могу понять, что это может быть. Если вы наведете курсор на изображение, а затем наведете курсор на другие изображения, это приведет к эффекту, при котором текст остается видимым только в течение короткого периода времени. Вы знаете, почему это может быть? это как-то связано с таймингами? спасибо за любые мысли.
Я обновил свой ответ, добавил clearTimeout, похоже, он решает проблему
Рам, спасибо за помощь. В итоге я использовал чистое CSS-решение Натана. Я только что загнал себя в угол. Спасибо еще раз.
Спасибо, Натан, ваш код помогает, однако у меня проблема с поведением при наведении. когда страница загружается впервые и вы наводите курсор на изображение, все работает отлично. При втором наведении курсора на изображение текст остается на короткое время, а затем исчезает. Вы знаете, что может быть причиной этого? Я немного застрял. У меня есть это на кодовой ручке здесь: Пример кода