滑块未显示生成克隆的标题答案

【问题标题】：Slider not showing captions for generated clones滑块未显示生成克隆的标题
【发布时间】：2013-10-24 18:20:32
【问题描述】：

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

【问题讨论】：

使用 jquery on() api.jquery.com/on $('.thisOne',this).on('mouseover',function(){ });
就像我说的那样，它适用于原始图像集，而不适用于克隆的图像。 mouseover 产生相同的效果。
你试过用 with .on 吗？
是的，我确实使用过它。它带来了同样的效果。我在这里说的问题是克隆没有针对性
您是否使用了 captions:true 选项？请也发布调用滑块的代码。

标签： javascript jquery bxslider

【解决方案1】：

这是你的solution

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

您的代码也不断在每次悬停时附加标题。这不是最佳的，所以添加了一个检查是否已经添加了标题。

   $('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>');    
        }
     }
  }               
  });

【讨论】：