無法在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'的元素都缺失了。

清除了這個小提琴的一些問題。