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

我希望创建一个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>

我的问题是我的jQuery，我似乎无法使用它。我希望的是，当单击arrow next（下一步）和arrow prev（上一步）时，将PSEDOO类从第一个移动到第二个，再移动到第三个，并返回到信息框的第一个子项。我不确定是否可以用jQuery移动伪元素，因为我正在寻找的三角效果是：after元素更难用非伪元素实现。 先谢谢你。这是一本书

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

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

css

---

可能的重复是一个公平的点，但是我已经有了一些绝对定位的元素。底部，我觉得当你有太多这样的元素时，得到三角形会变得很混乱：在相同的位置后，我必须绝对定位.arrowTriangle围绕.info框，我没有跟随。绝对定位元素？我们不是在讨论在单击事件的.info框元素之间移动类吗？这个问题听起来像是课堂上的工作。是的，我们是。但我的意思是，如果我要将三角形作为新元素上的伪元素重新创建，我需要绝对定位它所附加的新类。事实上，我会尝试一下，然后再给你回复。我不认为只是以某种方式移动：after psuedo会帮助你避免这个问题

 .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');
            });

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