Question

我使用这样的代码来动画我的幻灯片元素。注意，这更像是一个jquery问题而不是一个flexlider问题。

现在，在flexslider中，我可以定义一个jQuery对象作为参数传递，像这样指定滑块控件的容器：

$('.header-slider').flexslider({
    animation: "slide",
    directionNav: false,
    slideshowSpeed: 5000,
    controlsContainer: $('.header-slider .controls-container')
});

一切都很好，但是稍后当我定义第二个滑块时，让我们一步一步地将它复制粘贴到我的第二个滑块上面这样的代码

$('.quote-slider').flexslider({
    animation: "slide",
    directionNav: false,
    slideshowSpeed: 5000,
    controlsContainer: $('.quote-slider .controls-container')
});

像预期的那样，像魅力一样工作。但是，现在我们有了丑陋的代码，所以让我们清理它，因为两个滑块的选项是相同的，我想把它更通用地放到一个类中，这是下一步：

$('.slider').flexslider({
    animation: "slide",
    directionNav: false,
    slideshowSpeed: 5000,
    controlsContainer: $(this).find('.controls-container')
});

没有，问题就在这里。当然，$(this)指的是文件！那么，我可以在上面的代码（最后一个块）中做些什么来告诉jQuery我想引用当前选择的'.slider'而不是文档？显然，如果我只传递$（＆＃39; .controls-container＆＃39;）作为参数，我将在两个滑块中获得双重选项，所以我不想要那个。

Answer 1

你是对的，$(this)不会指向你正在调用flexslider()的元素。要解决此问题，您需要将flexslider()调用放在each()调用中，并将其置于元素范围内，如下所示：

$('.slider').each(function() {
    $(this).flexslider({
        animation: "slide",
        directionNav: false,
        slideshowSpeed: 5000,
        controlsContainer: $(this).find('.controls-container')
    });
});

jQuery在定义时获得选定的对象

1 个答案: