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

<强>解释

根据flexslider documentation，每个方法都有一个滑块对象的引用。
我周围的测试意识到slider.currentSlide返回当前幻灯片的编号，从0开始。
我们使用滑块对象和find来获取当前的幻灯片元素。我们需要向slider.currentSlide添加1，因为它从0开始，nth-of-type选择器以1开头。
我意识到find方法返回了3个li元素，但只有第一个元素是需要的元素，这就是我选择[0]元素的原因。
最后，我使用trim()删除多余的空格。

<强>更新

我意识到有更好的方法来做到这一点。 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);
        }   
    });
});

在FlexSlider中获取当前幻灯片的文本

1 个答案: