在 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，我似乎无法开始工作。我想要的是在单击 arrow-next 时将 pseduo class 从信息框的第一个到第二个到第三个（然后返回到第一个）子项移动（相反的是 arrow-prev ） .我不确定您是否可以使用 jQuery 移动伪元素，因为我正在寻找的三角形效果使用 :after 元素使用非伪元素更难实现。
提前谢谢你。这是一个jsfiddle.

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

Answer 1

将 :after 添加到特殊的 class，然后将 class 移动一下如何？我认为您甚至不能使用选择器

触摸 psuedo 元素

css

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

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

Moving pseudo elements to another on jQuery click event

css

jquery

pseudo-element