滑块不显示生成的克隆的标题

Slider not showing captions for generated clones

本文关键字：标题 显示      更新时间：2023-09-26

我有一个使用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（）; 很抱歉，我没有更好的方法来解释代码。

这是您的解决方案

我所做的是，使用一个名为幻灯片的自定义属性，并为不同的图像分配唯一的幻灯片编号。在悬停时，尝试查找具有相同属性的克隆对象。

此外，您的代码一直在每次悬停时附加标题。这不是最佳的，因此添加了检查以查看是否已添加标题。

   $('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>');    
        }
     }
  }               
  });
相关文章：