Question

单击锚链接，我试图将类添加到第一个列表项。第一个链接将没有活动的onload类，然后，单击下一个标记的onclick将活动的类添加到下一个列表项。但是，它正在选择所有列表项并添加活动类别。

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<a class="btn-solid next">NEXT</a>

$('.next').on('click', function() {
    $('ul li').next('li').addClass('active');
});

Answer 1

您可以执行以下操作（代码中的注释）

更新html，使其以活动元素开头
获取当前活动的li
检查活动列表中是否最后一个活动
如果是第一次激活，如果不是第一次激活

$('.next').on('click', function() {
  var currentActive = $('li.active'); // get current active
  currentActive.removeClass('active'); // remove class active

  if (currentActive.is(':last-child')) {
    $('li').first().addClass('active'); // add class to first li if last child
  } else {
    currentActive.next('li').addClass('active'); // otherwise add active to next li
  }
});

.active {
  color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active">start one li off as active otherwise the below won't work</li>
  <li>some stuff</li>
  <li>some stuff</li>
</ul>

<a class="btn-solid next">NEXT</a>

Answer 2

尝试将索引保留在变量中：

var idx = 0;
var lis = $('ul').children();

$('.next').on('click', function(){
    if (idx + 1 === lis.length){
        idx = 0;
    } else {
        idx++;
    }

    for  (i = 0; i < lis.length; i++){
        if (i === idx){
            lis[i].addClass('active');
        } else {
            lis[i].removeClass('active');
        }  
    }
}

Answer 3

看看：

$('.next').on('click', function() {
    var $activeEl = null;
    if($('ul li.active').length){
       //get the active element
       $activeEl = $('ul li.active');
    }
       //remove the active class 
       $('ul li').removeClass('active');

       if($activeEl != null) // set the active class to the first element
          $('ul li:nth-child(1)').addClass('active');
       else        //set the active class to the next one
          $activeEl.next('li').addClass('active');
});

Answer 4

嘿，请检查以下代码并输出，我想它将为您提供帮助。

    $('.next').on('click', function() {
  var activeClass = $('li.active');
  if (activeClass.is(':last-child')) {
    $('li').first().addClass('active');
    $('li').last().removeClass('active');
  }
  else {
    $('ul li.active').next('li').addClass('active');
    $('ul li.active').prev('li').removeClass('active');
  }
});

.active {
  color: #0000ff;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li class="active">one</li>
    <li>two</li>
    <li>three</li>
</ul>

<a href="#" class="btn-solid next">NEXT</a>

Answer 5

使用eq和length并使用if条件，如下所示。

$('body').on('click', '.next', function() {
  if ($('ul li.active').length == 0)
    $('ul li').eq(0).addClass('active');
  else
    $('ul li.active').removeClass('active').next('li').addClass('active');
});

.active {
  background-color: #666;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<a href='#' class="btn-solid next">NEXT</a>

Answer 6

您可以使用jQuery类选择器来获取当前活动的li，使用removeClass对其进行修改，并使用addClass来修改下一个li。

String getValue(int index, Object key){
    postModel.get(index).get(key); // or you really don't need to wrap it
}

如何将类添加到下一个li元素并将其从其他li元素移除？

6 个答案: