Jquery 具有多个导航选项的滑块会丢失索引，或者断裂或脱落？

我一直在构建一个产品巡演，多亏一位会员早些时候在这里的帮助，我能够在现有的巡演中加入一个“导航”。问题是有3种不同的导航方式

• 屏幕上的侧箭头
• 箭头键（左和右）
• 屏幕底部的滑块时间线

我注意到，在使用各种导航选项滚动我的后，滑块会断开。您可以尝试使用箭头键滑动，然后使用底部导航，只是一般使用会打断滑块

似乎我的索引不合适，当我实现滑块时，一位用户建议使用： 我也在抓狂

未捕获引用错误：未定义“e”

但是由于我没有编写代码，我不知道如何修复它

$(document).ready(function() {

var current = 0,
    $panels = $('.tour-panel'),
    noOfPanels = $panels.size() - 1,
    $currentElement = $panels.eq(current),
    $nextElement = $currentElement,
    $links = $('.slideshow-timeline a');

    function anyElement( slidePosition ) {
    $nextElement = $panels.eq(next);
    if (slidePosition > current) {
        $currentElement.removeClass('active-tour');
        $currentElement.addClass('fadeOutLeft');
        setTimeout(function () {
            $nextElement.addClass('active-tour fadeInRight');
        }, 50);
        setTimeout(function () {
            $currentElement.removeClass('fadeOutLeft');
        }, 750);
    } else if (slidePosition < current) {
        $currentElement.removeClass('active-tour');
        $currentElement.addClass('fadeOutRight');
        setTimeout(function () {
            $nextElement.addClass('active-tour fadeInLeft');
        }, 50);
        setTimeout(function () {
            $currentElement.removeClass('fadeOutRight');
        }, 750);
    } else {
        // in this case the element selected and the one showing are the same
        // there are no class changes to be applied
    }
    current = slidePosition;
    $currentElement = $nextElement;
}

$('.previous').click(function () {
    if (current === 0) {
        previous = noOfPanels;
    } else {
        previous = current - 1;
    }
    anyElement( previous );
});
Mousetrap.bind('left', function () {
    if (current === 0) {
        previous = noOfPanels;
    } else {
        previous = current - 1;
    }
    anyElement( previous );
});

$('.next').click(function () {
    if (current === noOfPanels) {
        next = 0;
    } else {
        next = current + 1;
    }
    anyElement( next );
});
Mousetrap.bind('right', function () {
    if (current === noOfPanels) {
        next = 0;
    } else {
        next = current + 1;
    }
    anyElement( next );
});

    $links.on('click', function () {
    e.preventDefault();
    var next = $links.index(this);
    anyElement( next );
    });

});

---

我的解决方案是什么来修复索引的顺序，就好像它中断了一样，它完全破坏了用户体验。非常感谢您的帮助

脚本一执行就中断。那不好。 这里有问题的代码是这一行（第164行附近）：

当它执行时，似乎没有类

sticky

的元素

还可以尝试更改以下代码（第66行附近）：

到

脚本中似乎有几个问题，因此最好的方法是检查控制台并调试关键错误

例如：您已将参数添加到上述函数中。现在您的脚本可以进一步执行，我们得到了一个以前没有看到的错误（因为脚本现在才能够到达那里）

---

新的错误是未定义

h

。请详细说明你正在努力实现的目标。您还可以创建一个JSFIDLE吗？（编辑它会更容易，如果你这样做。）

哦，你好，伊万，是的，我做了，这就是现在的代码。在“链接部分”会抛出e。我的问题是索引不同步，例如，您将使用带有按钮的index3，但在带有导航链接的索引5上。第一个问题是，因为代码用于不同的页面，我将不得不分离JS文件。现在在第66行附近出现了一个引用错误，这意味着您没有定义

h

。这是告诉我要替换的代码，我在哪里定义

h

？您可能正在使用一个丑陋的工具。对于调试，如果您在开发过程中没有这样做，它会很有帮助：）我在一个自动进行缩小的框架上，我无法更改它。不过，我正在用漂亮的字体编写代码。

<ul class="slideshow-timeline">
    <li class="active-target-main"><a href="#target" class="js-goto-panel">Target</a>
        <ul class="current-section">
            <li><a href="#target-1">Tracking</a></li>
            <li><a href="#target-2">Segmentation</a></li>
            <li><a href="#target-3">Wealth Screening</a></li>
            <li><a href="#target-4">Targeting</a></li>
            <li><a href="#target-5">Cultivation</a></li>
        </ul>
    </li>
    <li><a href="#connect">Connect</a></li>
    <li><a href="#convert">Convert</a></li>
    <li><a href="#optimize">Optimize</a></li>
</ul>

$(".sticky").offset().top;

h.on("click", function() {
    e.preventDefault();
    var i = h.index(this);
    b(i)
})

h.on("click", function( e ) {
    e.preventDefault();
    var i = h.index(this);
    b(i)
})