jquery - 通过 jquery 更改其类，将子元素显示为父元素

Question

可能是我无法在我的帖子标题中表达我的问题，但它就是......

假设我有一个父 div 元素，但没有。的子元素。所有子元素都设置为显示:无，我有两个 <a>下一个和上一个按钮的元素。我已将第一个子元素类激活。加载页面时，jQuery 将检查第一个子项的可见性是否设置为可见，然后它将禁用后退按钮。但我的问题是，当我点击下一个按钮时，如何将类“事件”分别设置为下一个，当它到达最后一个 child 时，下一个按钮会自动隐藏。

<div class="main">
    <div class="active">First child</div>
    <div>Second child</div>
    <div>Thirdchild</div>
</div>

<a href="" id="back">Back</a>
<a href="" id="next">Next</a> 

CSS:

.main{
    display: none;
}

.main.active{
    display: block;
}

J查询:

<script>
    $('document').ready(function () {

        if($('.main div').first().hasClass('active')){
            $("#back").hide();
        }

        /* Next previous **/
        $("#next").click(function(e) {


        });

        $("#back").click(function(e) {


        });

    });
</script>

Answer 1

您可以检查 active 是否有下一个兄弟，如果是，则从现有的类中删除类并添加到下一个。否则将类 active 添加到 .main div 元素中的第一个 div 元素，反之亦然逻辑适用于后退按钮:

$(function(){
$("#next").click(function(e) {
  var activeelement = $('.active');
  if(activeelement.next().length)
    activeelement.removeClass('active').next().addClass('active');
  else
    activeelement.removeClass('active').closest('.main').find('> div:first').addClass('active');
 });

$("#back").click(function(e) {
  var activeelement = $('.active');
  if(activeelement.prev().length)
activeelement.removeClass('active').prev().addClass('active');
  else
activeelement.removeClass('active').closest('.main').find('> div:last').addClass('active');
 });
});

.main div{
    display: none;
}

.main .active{
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <div class="active">First child</div>
    <div>Second child</div>
    <div>Thirdchild</div>
</div>

<a href="#" id="back">Back</a>
<a href="#" id="next">Next</a>