无法在jQuery滑块中实现“跳转到幻灯片”

Question

过去两天我一直在尝试这个，似乎无法找到解决方案..

我有上一个和下一个箭头用于导航（以及箭头键）。 但是现在我有一个时间轴，我似乎无法使用div-id（正确）“跳转到”幻灯片？

例如，如果我想从第1部分到第5部分，我希望能够点击我的第5部分按钮并跳转到该幻灯片。

这是我的工作范例 。 幻灯片的时间轴显示在幻灯片2+上。 例如，我只在目标部分工作。

这是我用来“跳转到幻灯片”的代码：

$('.slideshow-timeline a').click(function() {
    var target_id = $(this).attr('href');
    removeClasses();
    $($(".tour-panel")[current]).addClass("fadeOutRight");
    setTimeout(function() {
        $(target_id).addClass("active-tour fadeInLeft");
    }, 50);
    setTimeout(function() {
        $($(".tour-panel")[current]).removeClass("fadeOutRight");
    }, 750);
    current = target_id.split('-')[1] || 0;
});

但出于某种原因，我遇到了两个具体问题：

问题1：我点击进入幻灯片，然后使用箭头键返回〜这使我跳回2张幻灯片。

---

问题2：我点击进入幻灯片，然后使用箭头键前进〜这会打破我的滑块并显示白色屏幕

我相信大多数探针都在这行代码中：

current = target_id.split('-')[1] || 0;

但我不是100％肯定，并需要你们的帮助，我已经准备了一个非常基本的小提琴例子在这里 。

---

我尝试过的一些事情是搞乱split()变量，交换nextElement(); 和previousElement(); 我找不到有效的解决方案。

非常感谢所有帮助！

指向某些文件的链接

Pastebin到完整的JS

Pastebin到完整的CSS

Answer 1

看看小提琴：

https://jsfiddle.net/gjyswrr9/19/

问题分为三个方面：

var previous = parseInt(current, 10) - 1;
var next = parseInt(current) + 1;

（它们是字符串，而不是整数）。

和

current = target_id.split('-')[1] - 1 || 0;

（你计算以1开头的链接）

希望它能按你的需要工作。

Answer 2

你去吧 - > 小提琴

我基本上改变的是您current值，您在点击功能中定义了该值。 实际上，你的id值是一个字符串，所以触发nextElement()不会改变值，而是会连接它。 这导致了一些奇怪的行为，所以不是从目标更改0到1 ，你只需要改变从0到01 。

此外，我已经调整了你的$('.slideshow-timeline a').click(function() { }的行为方式与nextElement()函数相同。

编辑：我忘了提

我相信大多数探针都在这行代码中：

 current = target_id.split('-')[1] || 0; 

你是对的。 如上所述， target_id.split('-')[1]将返回一个字符串值，而不是一个数字，如上所述，这将导致奇怪的行为，您的代码只是将您返回的字符串与数字连接起来。 为了达到你想要的目的，你必须分析target_id.split('-')[1]的值转换成number通过使用JavaScript的内置值parseInt()函数。

结果如下：

current = parseInt(target_id.split('-')[1]) || 0;

Answer 3

您好，请查看以下链接..

这是你想要的吗？

请参考此链接[jsFiddle] [1]

[1]: https://jsfiddle.net/gjyswrr9/39/

脚本代码如下，

$(document).ready(function() {

var current = 0;

function previousIndex() {
var previous = parseInt(current,10) - 1;
if(previous == 0) {
    previous = $(".tour-panel").size();
}
return previous;
}

function nextIndex() {
var next = parseInt(current,10) + 1;
if(next == $(".tour-panel").size()+1) {
next = 1;
}
return next;
}

function removeClasses() {
$(".tour-panel").each(function(index) {
if(index != current) {
  $(this).removeClass("active-tour fadeInRight fadeInLeft fadeOutRight fadeOutLeft");
}
})
}

function nextElement() {
removeClasses(); 
current = nextIndex();
setTimeout(function() {
$("#target-"+current).addClass("active-tour fadeInRight");
 }, 50);
 }

function previousElement() {
removeClasses();
current = previousIndex();
setTimeout(function() {
$("#target-"+current).addClass("active-tour fadeInLeft");  
}, 50);
setTimeout(function() {
$($(".tour-panel")[nextIndex()]).removeClass("active-tour fadeOutRight");
}, 750);
}


$('.slideshow-timeline a').click(function() {
  var target_id = $(this).attr('href');
removeClasses();
$($(".tour-panel")[current]).addClass("fadeOutRight");
setTimeout(function() {
    $(target_id).addClass("active-tour fadeInLeft");
}, 50);
setTimeout(function() {
    $($(".tour-panel")[current]).removeClass("fadeOutRight");
}, 750);
current = target_id.split('-')[1] || 0;
});


Mousetrap.bind('left', previousElement);
Mousetrap.bind('right', nextElement);

$(".previous").click(previousElement);
$(".next").click(nextElement);
});

Answer 4

你是对的......问题在于这一行：

current = target_id.split('-')[1] || 0;

试试这个：

current = (target_id.split('-')[1] - 1) || 0; // cater for zero-index

UPDATE

• 在进一步的调查中，我发现了你的小提琴上的一些东西（12月12日）：'连接'，'转换'和'优化'的'li'超出了上面的'ul' - 我猜这是在哪里他们应该是。
• 上面提到的'li'的id不符合你的命名约定（“target-1”，“target-2”等）。 这肯定会导致这里采用的策略失败。
• 每个'li'中应该有匹配的'div'元素......在你的小提琴中 ，前面提到的'li'的元素都缺失了。

清除了这个小提琴的一些问题。