Question

我有一个使用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>');                       
    }               
    });

broswer会在列表中生成一个带有“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（）;对不起，我没有更好的解释代码的方法。

Answer 1

这是您的solution

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

此外，您的代码会在每个悬停时附加标题。它不是最佳的，所以添加了一个检查以查看是否已添加标题。

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

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

1 个答案: