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

Question

我在试着做一个滑块。我有四个内容，我做了一个又一个，看不见。然后我有一个名为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');
                }

}

请参考这个小提琴。