獲取FlexSlider當前幻燈片的文本

Question

我在我的網站上使用FlexSlider。我想獲取當前幻燈片的文字。我嘗試做它在after功能：

$(window).load(function() { 
    $('.flexslider').flexslider({ 
     startAt: 1, 
     controlNav: false, 
     animationLoop: false, 
     slideshow: false, 
     animation: "slide", 
     directionNav: true, 
     after: function(){ 
      var curSlide = $('#slider').data('flexslider').currentSlide; 
      alert("current slide="+curSlide.text()); 
     } 
    }); 
}); 

我嘗試使用text()功能，但它不工作。我怎樣才能做到這一點？

Answer 1

currentSlide返回當前幻燈片的編號，而不是元素。您可以使用nth-of-type來查找元素。

$(window).load(function() { 
    $('.flexslider').flexslider({ 
     startAt: 1, 
     controlNav: false, 
     animationLoop: false, 
     slideshow: false, 
     animation: "slide", 
     directionNav: true, 
     after: function(slider){ 
      var curSlide = slider.find("li:nth-of-type("+(slider.currentSlide+1)+")")[0]; 
      var text = $(curSlide).text().trim(); 
      alert(text); 
     } 
    }); 
}); 

這裏是一個工作JSFiddle

說明：

1. 按照flexslider documentation，每種方法都有在滑塊對象的引用。
2. 測試圍繞我意識到，slider.currentSlide返回當前幻燈片的編號，從0
3. 我們使用滑塊對象和find開始得到當前幻燈片元素。我們需要添加1到slider.currentSlide，因爲它從0開始，而nth-of-type選擇器從1開始。
4. 我意識到find方法返回了3 li元素，但只有第一個是需要的元素，這就是爲什麼我選擇了[0]元素。
5. 最後我用trim()刪除多餘的空格。

UPDATE

我意識到有一個更好的辦法來做到這一點。 FlexSlider將類別flex-active-slide指定給活動幻燈片，因此獲取幻燈片元素更容易。

$(window).load(function() { 
    $('.flexslider').flexslider({ 
     startAt: 1, 
     controlNav: false, 
     animationLoop: false, 
     slideshow: false, 
     animation: "slide", 
     directionNav: true, 
     after: function(slider){ 
      var curSlide = slider.find("li.flex-active-slide"); 
      var text = $(curSlide).text().trim(); 
      alert(text); 
     } 
    }); 
});