Question

我试图改变点击容器内div的类并创建一个循环。但是使用.next选择器，该类将应用于所有元素。

jQuery-Code：

$(document).ready(function(){
    $( "#link" ).click(function() {
        if ( $( ".inhalt" ).hasClass( "active" )) {
            if ( $( ".inhalt" ).last().hasClass( "active" )) {
                $( ".inhalt" ).removeClass('active');
                $( ".inhalt" ).first().addClass('active');
                return;
            }   
            $( ".inhalt" ).prev().removeClass('active');
            $( ".inhalt" ).next().addClass('active');
        }
        else {
            $( ".inhalt" ).first().addClass('active');
        }
    });
});

HTML：

<div id="container">
   <div class="inhalt"><a href="#">1</a> </div>
   <div class="inhalt"><a href="#">2</a> </div>
   <div class="inhalt"><a href="#">3</a> </div>
   <div class="inhalt"><a href="#">4</a> </div>
   <div class="inhalt"><a href="#">5</a> </div>
   <div class="inhalt"><a href="#">6</a> </div>
</div>
<div><a href="#" id="link">hier</a></div>

提前感谢您的帮助！亚历

Answer 1

好的，您希望活动类在元素之间循环：

jQuery(function($) {
  var $inhalts = $('.inhalt'),
      index = null; // no active item yet

  $('#link').on('click', function() {
    if (index === null) {
      index = 0; // make the first one active
    } else {
      $inhalts.eq(index).removeClass('active'); // remove class from previous
      index = (index + 1) % $inhalts.length; // go to next item and wrap
    }
    $inhalts.eq(index).addClass('active');
  });
});

此代码缓存要应用活动类的项目列表，并保留最后一个活动项目的索引。

算法：

如果之前没有选择元素，则将索引设置为第一个项目。
否则，删除当前索引的类并增加索引（确保它包裹）
将活动类应用于当前索引。

Answer 2

试试这个：

$(function(){
    $('#link').click(function(e){
      e.preventDefault();
     if($('.active').length==0 || $('.active').next().length==0)
     {
         $('.active').removeClass('active');
         $('.inhalt:first').addClass('active');
     }
     else
     {
          $('.active').removeClass('active').next().addClass('active');
     }  

    });
});

<强> Demo

Answer 3

这是另一种方式 - http://jsfiddle.net/jayblanchard/5x72x/

$('#link').click(function () {
    if ($('.inhalt').last().hasClass('active')) {
        $(".inhalt").removeClass('active');
        $(".inhalt").first().addClass('active');
    } else {
        $('.active').next('.inhalt').addClass('active');
        $('.active').first().removeClass('active');
    }
});

此方法利用了解活动类的位置。唯一可以做的就是确定是否有任何div具有活动类，然后将活动类添加到第一个如果没有它的话。

编辑：http://jsfiddle.net/jayblanchard/5x72x/1/演示了对课程的测试，如果它不存在则会添加到第一个课程。

$('#link').click(function () {
    if(!$('.inhalt').hasClass('active') ){
        $(".inhalt").first().addClass('active');
    } else if ($('.inhalt').last().hasClass('active')) {
        $(".inhalt").removeClass('active');
        $(".inhalt").first().addClass('active');
    } else {
        $('.active').next('.inhalt').addClass('active');
        $('.active').first().removeClass('active');
    }
});

jQuery .next - 向下一个元素添加一个类

3 个答案: