Jquery 使用Flexslider'；s selector属性以按DOM降序跳过某些幻灯片

为什么我不能让Flexslider的属性在瞄准不是按DOM顺序一张接一张的幻灯片时正常工作

基本上，我发现瞄准

.testA

会起作用，而瞄准

.testB

、

.testC

或

。testD

会失败

<ul class="slides">

    <li class="testA testB"><img/></li>
    <li class="testA testC"><img/></li>
    <li class="testB testD"><img/></li>
    <li class="testC testD"><img/></li>

</ul>

失败这实际上意味着它一开始显示正确，但当单击缩略图导航转盘的最后一张幻灯片时，它将滚动到“无”（白色背景）

---

，这是缩略图滑块官方示例实现（包含在小提琴中的链接）的副本，我在其中添加了类和自定义选择器。要检查各种目标选项，您可能需要在JS窗口中的当前选择器参数中添加注释标记，并将其从以下列表中删除，

#slider

&

#carousel

divs.

出现此问题的原因是

target=$slide.index（）


这里jquery的函数负责决定flexslider导航到的正确目标。为了更好地理解和解决这个问题，让我们看看索引函数的不同调用-

如果没有向.index（）方法传递任何参数，则返回值是一个整数，指示jQuery对象中第一个元素相对于其同级元素的位置。



如果选择器字符串作为参数传递，.index（）返回一个整数，指示jQuery对象中第一个元素相对于选择器匹配的元素的位置
现在，在您的情况下，例如，如果在总共4个图像中选择/可见第1个和第4个图像，则根据flexslider中索引函数的当前调用，返回的索引值为0和3，因为它仍在原始图像列表中，而不是在过滤/匹配列表中，因此flexslider导航不正确。在这种情况下，正确的值显然是0和1，这就是为什么前两张幻灯片从来没有出现过问题

因此，要解决这个问题，您需要在自定义选择器的情况下使用index函数的第二次调用。在默认flexslider js文件中替换为以下内容将解决此问题-

    target = $slide.index("#carousel " + slider.slides.selector);

@Shikhar上也报道了这个问题，它找到了一个有趣的切入点来解决这个问题。它可以从中读取。太棒了！它确实解决了这个问题。我来到这里是为了让它可以用于任何实现，并且可以在Github上请求拉取。就在将其标记为已解决之前，如果我已经理解了错误的总体原因，那么我错过了一个细节。您能否解释一下，除了选择器变量之外，为什么还需要指定容器（在本例中为
#carousel
？这是一个。也就是说，为什么它不能只与
target=$slide.index（slider.slides.selector）一起工作？显然它应该：更准确地说，对于
$slide.index（mySelector）
indexOf.call（jQuery（mySelector），这个[0]）。使用
indexOf
我理解了
这个[0]
参数的含义，它重置索引并仅在
$slide
中使用匹配的元素对其进行计数，而不是在整个DOM的父元素中。但是作为完整的CSS路径（包括
#carousel
）已在
$slide
对象中考虑到，第一个参数，即
jQuery（mySelector）
，表示如果我理解正确，在
$slide
对象中搜索什么，我不明白为什么我们需要在Flexslider的L.164处再次指定
#carousel
，最终这也意味着我不明白为什么
index（）
不能返回预期结果。在
this.first（）.prevAll（）.length
。然而，在中提到，这个函数获取匹配元素集中每个元素的所有前面的同级，可选地通过选择器进行过滤。但是，
$slide
是否已经匹配了所需的元素？