リストをループし、次のアイテムを2番目に与えるクラス

Question

3つのアイテムのリストがあります。上/下ボタンをクリックすると、インデックス/アクティブアイテムが変更されます。インデックスがクラス 'ドレイン'を持つ必要があり、インデックスの後に2番目の次の後に、クラス 'unfill'を取得する必要があります。それをクリックすると、インデックスが1であるときに、この

次のようになります。

<a href="#" class="active"> Item One </a> 
<a href="#" class="drain"> Item Two </a> 
<a href="#" class="unfill"> Item Three </a> 

インデックスが2のとき：

<a href="#" class="unfill"> Item One </a> 
<a href="#" class="active"> Item Two </a> 
<a href="#" class="drain"> Item Three </a> 

インデックスが3のとき：

<a href="#" class="drain"> Item One </a> 
<a href="#" class="unfill"> Item Two </a> 
<a href="#" class="active"> Item Three </a> 

マイ数学はそれほど良いことではない、誰かがこのループがどのように見えるか教えてくれますか？あなたは「アクティブ」クラスを設定すると

var services = $('header.header-image .services-links a'); 
var totalServices = services.length; 
var arrowUp = $('header.header-image .services .pagination .up'); 
var arrowDown = $('header.header-image .services .pagination .down'); 

arrowUp.click(function(event) { 
if (index > 1){ 
    index = index - 1; 
} else { 
    index = totalServices; 
} 
updateActiveClass('up'); 
}); 

arrowDown.click(function(event) { 
if (index < totalServices){ 
    index = index + 1; 
} else { 
    index = 1; 
} 
updateActiveClass('down'); 
}); 

services.click(function(event) { 
event.preventDefault(); 
thisIndex = $(this).index(); 
index = thisIndex + 1; 
updateActiveClass(); 
}); 

Answer 1

あなただけの次の「ドレイン」と「アクティブ」から「unfill」に、残りのすべてを設定することができます。それは最善の解決策ではありませんが、うまくいくはずです。

$(function(){ 
 

 
\t //cache elements 
 
    var ul = $('ul'); 
 
    var lists = $('ul > li'); 
 

 
\t $('.up').on('click', function(){ 
 
    
 
    var active = ul.find('.active'); 
 
    
 
    // Remove all classes and set to unfill 
 
    lists.removeClass().addClass('unfill'); 
 
    
 
    // check for next item to set the active class 
 
    if(active.next().length){ 
 
    \t active = active.next().removeClass('unfill').addClass('active'); 
 
    }else{ 
 
     active = lists.first().removeClass('unfill').addClass('active'); 
 
    }; 
 
    
 
    
 
    // check for next item to set the active drain class 
 
    if(active.next().length){ 
 
    \t active.next().removeClass('unfill').addClass('drain'); 
 
    }else{ 
 
     lists.first().removeClass('unfill').addClass('drain'); 
 
    }; 
 
    }); 
 
    
 
\t $('.down').on('click', function(){ 
 
    
 
    \t var active = ul.find('.active'); 
 
    
 
    // Remove all classes and set to unfill 
 
    lists.removeClass().addClass('unfill'); 
 
    
 
    // check for next item to set the active class 
 
    if(active.prev().length){ 
 
    \t active = active.prev().removeClass('unfill').addClass('active'); 
 
    }else{ 
 
     active = lists.last().removeClass('unfill').addClass('active'); 
 
    }; 
 
    
 
    
 
    // check for next item to set the active drain class 
 
    if(active.next().length){ 
 
    \t active.next().removeClass('unfill').addClass('drain'); 
 
    }else{ 
 
     lists.first().removeClass('unfill').addClass('drain'); 
 
    }; 
 
    }); 
 
})

.active {color: green;} 
 
.drain {color: red;} 
 
.unfill {color: grey;} 
 

 
.active:after {content: ' active';} 
 
.drain:after {content: ' drain';} 
 
.unfill:after {content: ' unfill';}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="active">A</li> 
 
    <li class="drain">B</li> 
 
    <li class="unfill">C</li> 
 
    <li class="unfill">D</li> 
 
</ul> 
 

 
<button class="up">UP</button> 
 
<button class="down">DOWN</button>