Ползунок, не показывающий титры для сгенерированных клонов

89
13

У меня есть этот слайдер изображения, который был создан с использованием bxslider, который должен отображать титры, когда мышь нависает над изображением. Код работает очень хорошо для изображений, которые я вставляю, но есть список клонов, сгенерированных в слайдере, для которых титры не работают. Я не уверен, как заставить их работать.

           $('.thisOne',this).hover(function() {        
var title = $(this).attr('title');
if (title != undefined && ('' + title).length) {
$(this.parentNode).append('<div class="bx-caption"><span>' + title + '</span></div>');
}
});

Браузер генерирует копию изображений с классом "bx-clone" из списка и добавляет им список изображений, таких как приведенный ниже.

        <ul class="bxslider1">
<li><img class="thisOne" img src="images/pic1.jpg" title="Lorem ipsum dsafkjhsdaflkhdsafkj"/></li>
<li><img class="thisOne" src="images/pic2.jpg" title="Lorem ipsum dsafkjhsdaflkhdsafkj" /></li>
<li><img class="thisOne" src="images/pic3.jpg" title="Lorem ipsum dsafkjhsdaflkhdsafkj" /></li>
<li><img class="thisOne" src="images/pic4.jpg" title="Lorem ipsum dslfakjds;lafkjds;lafkjg;oljdfgopi ds ogijugjdfoi" /></li>
<li><img class="thisOne" src="images/pic5.jpg" title="Lorem ipsum dslfakjds;lafkjds;lafkjg;oljdfgopi ds ogijugjdfoi" /></li>
<li><img class="thisOne" src="images/pic7.jpg" title="Lorem ipsum dslfakjds;lafkjds;lafkjg;oljdfgopi ds ogijugjdfoi" /></li>
</ul>

Я не знаю, как заставить cpations отображаться поверх дубликатов изображений. Если это помогает, я завернул свою функцию внутри $ (document).ready(); Извините, но у меня нет лучшего способа объяснить код.

спросил(а) 2021-01-28T00:38:44+03:00 3 месяца, 1 неделя назад
1
Решение
115

Вот ваше решение

То, что я сделал, использует пользовательский атрибут, называемый слайдом, и назначает уникальные номера слайдов для разных изображений. И при наведении попытайтесь найти клонированный объект с тем же атрибутом.

Кроме того, ваш код продолжал добавлять надпись под каждым зависанием. Это не оптимально, поэтому добавлена проверка, чтобы увидеть, добавлена ли подпись.

   $('img').hover(function() {        
var title = $(this).attr('title');
var slideNo = this.getAttribute('slide');
if (title != undefined && ('' + title).length) {
var captionAdded = $(this.parentNode).find('.bx-caption');
if(captionAdded.length == 0){
var imgObjs = $(this).parents('ul').find('img[slide='+slideNo + ']');
for(var i=0; i<imgObjs.length; i++){
$(imgObjs[i].parentNode).append('<div class="bx-caption"><span>' + title + '</span></div>');
}
}
}
});

ответил(а) 2021-01-28T00:38:44+03:00 3 месяца, 1 неделя назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема