Question

我有一个包含3个项目的列表，单击向上或向下按钮时索引/活动项目会发生变化。我希望在索引之后应该有一个类＆＃39; drain＆＃39;并且在索引之后的第二个应该得到课程＆＃39; unfill＆＃39;。所以当点击它时看起来像这样

当index为1时：

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

当index为2时：

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

当index为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

当您设置“主动”课程时，您可以将所有其余课程设置为“取消”，然后将“主动”设置为“排水”。它不是最好的解决方案，但应该有效。

$(function(){

	//cache elements
  var ul = $('ul');
  var lists = $('ul > li');

	$('.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){
    	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){
    	active.next().removeClass('unfill').addClass('drain');
    }else{
      lists.first().removeClass('unfill').addClass('drain');
    };
  });
  
	$('.down').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.prev().length){
    	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){
    	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>

循环列表，给出第二个以下项目类

1 个答案: