jQuery 根据定义获取选定的对象

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

正如预期的那样，很有魅力。然而，现在我们有丑陋的代码，所以让我们清理它，因为两个滑块的选项相同，我想把它更通用化为一个class，这是下一步：

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

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

Answer 1

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

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

jQuery 根据定义获取选定的对象

jQuery get selected object upon definition

javascript

jquery

flexslider