當它達到第四個標籤不應該去第一

Question

• 我是新來的js
• 當我點擊左右箭頭標籤一圈又回到
• 但圈應該停止。當它到達第四個標籤時，它不應該先到達第一個標籤。
• 同樣它也應該發生在左ar上。
• 在下面提供我的代碼。

https://codepen.io/chandrashekhar/pen/mMGRbq

function move(to) { 
    var current = $('li.current').index(); 
    var total = $('.tabs .tab-link').length; 
    var add; 
    switch (to) { 
     case 'left': 
     add = -1; 
     break; 
     case 'right': 
     add = 1; 
     break; 
    } 
    $('.tabs li.tab-link').eq((current+add)%total).click(); 
    } 

Answer 1

在這裏你去：

function move(to) { 
    var current = $('li.current').index(); 
    var total = $('.tabs .tab-link').length; 

    var add; 
    switch (to) { 
    case 'left': 
     current > 0 ? add = -1 : add = 0; // don't decrement if we're already at the leftmost tab 
     break; 
    case 'right': 
     add = 1; 
     break; 
    } 
    $('.tabs li.tab-link').eq((current+add)).click(); // removed modulus operator to prevent wrapping back to 0 
} 

• 我添加了一個條件case 'left':檢查，如果我們在最左邊的標籤目前是（索引0）如果是這樣的話，不要進一步減少。
• 我已經從$('.tabs li.tab-link').eq((current+add)).click();中刪除了模數（％）運算符，以防止索引在我們單擊最右側選項卡激活時的右箭頭時迴繞爲0。

Answer 2

我下面的代碼添加到您的函數提前終止，如果達到結束標籤：

if (to === 'right' && current === (total - 1)) { 
    return; 
} else if(to === 'left' && current === 0) { 
    return; 
} 

工作例如：https://codepen.io/anon/pen/RZeNWq?editors=0001

作爲一個方面說明，我懇求你想想選擇DOM元素時的大圖，例如在您的代碼中：

var current = $('li.current').index(); 

an li元素與current類是非常通用的 - 如果您的頁面上存在完全不相關的li標記，且該類標記也具有current的類別，則代碼將會中斷。如果你有一個菜單項也有current類的導航欄？或者即使你的頁面有2組標籤，這段代碼也不會允許。

var current = $('.tab-link.current').index();