javascript - jQuery next().addClass() 和 prev().addClass() 问题

Question

我正在尝试制作一个 slider 。我有四个内容，我把它们一个接一个地做成不可见的。然后我有一个名为 active-client 的类，它具有 display: flex 属性。我用 jQuery 的 addClass() 显示第一个内容。我想用箭头滑动它们，但它不起作用。

$( document ).ready(function() {
    clientSection();
});

function clientSection(){
    $('.client-unit').first().addClass('active-client');

    $('.client-control-next, .client-control-prev').click(function() {
        var $this = $(this),
            curActiveClient = $('.clients-belt').find('.active-client'),
            position = $('.clients-belt').children().index(curActiveClient),
            clientNum = $('.client-unit').length;

        if ($this.hasClass('client-control-next')) {
            if (position < clientNum -1) {
                $('.active-client').removeClass('active-client').next().addClass('active-client');
            } else {
                $('.client-unit').removeClass('active-client').first().addClass('active-client');
            }
        } else {
            if (position === 0) {
                $('.client-unit').removeClass('active-client').last().addClass('active-client');
            } else {
                $('.active-client').removeClass('active-client').prev().addClass('active-client');
            }
        }
    });
}

#clients {
    position: relative;
}

.clients-belt {
    width: 100%;
    position: relative;
}

.clients-belt .client-unit {
    max-width: 750px;
    margin: 0 0 50px -375px;
    position: absolute;
    top: 0px;
    left: 50%;
    z-index: 1;
    display: none;
}

.clients-belt .client-unit.active-client {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

.clients-belt .client-unit .client-face {
    min-width: 300px;
    text-align: center;
}

.clients-belt .client-unit .client-face img {
    max-width: 100px;
    border-radius: 50%;
}

.clients-belt .client-unit .client-face .client-name {
    display: block;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
}

.clients-belt .client-unit .client-face .client-title {
    font-size: 12px;
    font-style: normal;
    color: #999;
}

.clients-belt .client-unit .client-content {
    font-size: 18px;
    line-height: 36px;
    font-weight: 300;
    margin-top: -10px;
    position: relative;
}

.client-controls {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.client-controls > div {
    height: 40px;
    width: 40px;
    cursor: pointer;
}

.client-controls .client-control-next {
    position: absolute;
    top: 50%;
    right: 10px;
}

.client-controls .client-control-prev {
    position: absolute;
    top: 50%;
    left: 10px;
}

<div class="client-controls">
    <div class="client-control-next"><img src="/img/clients/next.svg" alt=""></div>
    <div class="client-control-prev"><img src="/img/clients/prev.svg" alt=""></div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client1.jpg" alt="client-face">
            <strong class="client-name">Denn Summer</strong>
            <em class="client-title">Director of Programmer</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client2.jpg" alt="client-face">
            <strong class="client-name">Sott Spring</strong>
            <em class="client-title">Director of Designer</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client3.jpg" alt="client-face">
            <strong class="client-name">Bonn Winter</strong>
            <em class="client-title">Nothing of Web</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<div class="clients-belt">
    <div class="client-unit">
        <div class="client-face">
            <img src="img/clients/client4.jpg" alt="client-face">
            <strong class="client-name">Kate Roses</strong>
            <em class="client-title">Director of Nothing</em>
        </div>
        <div class="client-content">
            <div class="client-quote-mark"><img src="/img/clients/quote.svg" alt=""></div>
            <p><strong>Photoshop's version  of Lorem Ipsum.</strong> Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non  mauris </p>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

我已经更改了这部分关于 HTML 标记结构的代码。

if ($this.hasClass('client-control-next')) {
                if (position < clientNum -1) {
                    $('.active-client').removeClass('active-client').parent().next().find(".client-unit").addClass('active-client');
                } else {
                    $('.client-unit').removeClass('active-client').first().addClass('active-client');
                }

} else {

                if (position === 0) {
                    $('.client-unit').removeClass('active-client').last().addClass('active-client');
                } else {

                    $('.active-client').removeClass('active-client').parent().prev().find(".client-unit").addClass('active-client');
                }

}

请引用这个fiddle .