具有多个导航选项的滑块会丢失索引，或者断开或掉错位置？

Question

我已经建立了一个产品旅游，感谢一个成员的帮助，在这里，我能够包括一个“导航”到我现有的旅游。问题是有三种不同的导航方式。

• 屏幕上的侧箭头
• 箭头键(左右键)
• 屏幕底部滑块时间线

我注意到，在滚动通过我的工作项目与各种导航选项，滑块将打破。您可以尝试用箭头键滑动，然后使用底部导航，只是一般使用打破滑块。

当我实现用户建议使用的滑块时，我的索引似乎不合适了:我还捕获了一个

未定义的参考错误：“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 );
    });

});

在导航滑块时，它似乎很难在两者之间进行解密，我也使用这个HTML来构建较低的导航。它构建的思想是链接到一个#id，然后使用我的滑块引用id并将其拉到屏幕上。

<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>

我的解决方案是如何修正索引的顺序，就好像它坏了一样，它完全破坏了用户体验。非常感谢您的帮助！

Answer 1

脚本一执行就会中断。这可不妙。这里有问题的代码是这一行(围绕第164行)：

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

当它执行时，类sticky似乎没有元素。

还尝试更改以下代码(围绕第66行)：

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

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

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

新的错误是没有定义h。请详细说明你想要完成的任务。您还能创建一个JSFiddle吗？(如果你这样做了，编辑起来会更容易。)