在jQuery单击事件上将伪元素移动到另一个

Question

我希望使用下面的代码创建一个 jQuery 滑块（暂时不要将其标记为重复）。

<div class="jumbotron">
    <div class="top">
        <div class="arrow-next">Next</div>
            <div class="arrow-prev">Prev</div>
    </div>
    <div class="bottom">
        <div class="row">
            <div class="col-md-4 info-box"></div>
            <div class="col-md-4 info-box"></div>
            <div class="col-md-4 info-box"></div>
        </div>
    </div>
</div>

 .jumbotron {
        margin: 0; padding: 0;
        position: relative;
    }
    .jumbotron .bottom {
        position: absolute; bottom: 0; left: 0; right: 0; height: 30%;
        background-color: lightseagreen; padding: 0;
    }
    .jumbotron .bottom .row {
        position: absolute; top: 0; bottom: 0; right: 0; left: 0;
    }
    .jumbotron .bottom .info-box {
        position: relative;  margin: 0;
    }
    .jumbotron .top {
        position: absolute; top: 0; left: 0; right: 0; height: 70%;
        background-color: darkgrey;
    }
    .jumbotron .bottom .info-box:first-child:after {
        content: "";
        position: absolute; top: -14px; left: 48%; right: 48%;
        border: 15px lightseagreen solid; border-top: none; border-left: 15px transparent solid; border-right: 15px transparent solid;
    }
    .jumbotron .info-box {
        border-right: 1px white solid;
        min-height: 100%;   
    }
    .arrow-next, .arrow-prev {
        position: absolute; bottom: 0; top: 0; right: 0; width: 50px; vertical-align: middle; text-align: center;
        background-color: rgba(54,54,54,0.6); z-index: 999; color: white; display: none;
    }
    .arrow-prev {
        position: absolute; left: 0; bottom: 0; top: 0; right: none;    
    }

$('.jumbotron').css("height",$(window).height()-$('.navbar').height());
            $('.top').mouseenter(function() {
                $('.arrow-next, .arrow-prev').fadeIn(1000);
            });
            $('.top').mouseleave(function() {
                $('.arrow-next, .arrow-prev').fadeOut(1000);
            });
            $('.arrow-next').click(function() {
                var currentSlide = $('.info-box:after');
                var nextSlide = currentSlide.next();

                if(nextSlide.length === 0) {
                    nextSlide = $('.info-box').first();
                }

                currentSlide.fadeOut(600).removeClass('.info-box:after');
                nextSlide.fadeIn(600).addClass('info-box:after');
            });

我的问题是我的 jQuery，我似乎无法开始工作。我希望在单击箭头下一步时将伪类从信息框的第一个到第二个到第三个（并返回到第一个）子级之后移动（相反的箭头上一个）。我不确定您是否可以使用 jQuery 移动伪元素，因为我正在寻找的三角形效果 :after 元素更难以使用非伪元素实现。
提前谢谢你。这是jsfiddle。

编辑：我的问题与假设的重复不同，因为我希望实际修改元素的属性，而不是内容。那个假定的重复至少不能解释这一点。

Answer 1

将:after 添加到一个特殊的类，然后移动那个类怎么样？我认为你甚至不能用选择器触摸psuedo 元素

css

.arrowTriangle { }
.arrowTriangle:after { "some code" }