指向某些文件的链接

Question

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

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

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

Here is my working example 即可。幻灯片的时间轴显示在幻灯片2+上。例如，我只在目标部分工作。

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

app:layout_behavior="@string/appbar_scrolling_view_behavior"

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

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

问题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; });

但我并非百分百肯定并且需要你的帮助，我准备了一个非常基本的小提琴示例 here 。

我尝试过的一些事情是弄乱current = target_id.split('-')[1] || 0;个变量，换掉split()和nextElement();，我找不到有效的解决方案。

非常感谢所有帮助！

指向某些文件的链接

Pastebin to full JS

Pastebin to full CSS

Answer 1

看看那个小提琴：

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

问题出在3个地方：

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

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

并且

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

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

希望它能够满足你的需要。

Answer 2

你去 - ＆gt; fiddle

我基本上更改的是您在点击功能中定义的current值。实际上，您的id值是一个字符串，因此触发nextElement()不会更改该值，而是会将其连接起来。这会产生一些奇怪的行为，因此您只需将0更改为1，而不是从目标0更改为01。

我还调整了您的$('.slideshow-timeline a').click(function() { }，其行为方式与您的nextElement()功能相同。

修改：我忘了提及

我相信大多数探针都在这行代码中：
current = target_id.split('-')[1] || 0;

你是对的。如上所述，target_id.split('-')[1]将返回一个字符串值，而不是一个数字，如上所述，这又会导致奇怪的行为，您的代码只是将返回的字符串与数字连接起来。为了实现您想要的目标，您必须使用JavaScripts内置target_id.split('-')[1]函数将number的值解析为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

<强>更新

在进一步调查中，我在fiddle（16-Feb-16）发现了一些事情： 'li'代表'连接'，'转换'和'优化'超出了上面的'ul' - 我猜这是他们应该去的地方。
上面提到的'li'的ID不遵循您的命名约定（“target-1”，“target-2”等）。这肯定会导致这里采用的策略失败。
fiddle中每个'li'...应该有匹配的'div'元素，上述'li'的元素缺失。

清除了fiddle的一些问题。

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

指向某些文件的链接

4 个答案: