当addClass()发生时添加css

Question

下面是这个bootstnipp示例旋转木马的“最小”修改版本：

https://bootsnipp.com/snippets/VolV

我添加了sass，以便在“活动”列表项中设置一个彩色边框。当“active”类被更改/添加到新的列表项时，我试图编辑javascript文件以更改边框。首先，我尝试创建一个变量来存储“活动”列表项的边框缺口的currentColor，然后，将父ul的边框颜色更改为与“活动”列表项的边框凹槽颜色相对应。

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ul class="nav nav-pills nav-justified carousel-border">
        <li data-target="#myCarousel" data-slide-to="0" class="client-1 active">
            <a href="#">
                <img src="" class="" alt="" title="">
            </a>
        </li>
        <li data-target="#myCarousel" data-slide-to="1" class="client-2">
            <a href="#">
                <img src="" class="" alt="" title="">
            </a>
        </li>
        <li data-target="#myCarousel" data-slide-to="2" class="client-3">
            <a href="#">
                <img src="" class="" alt="" title="">
            </a>
        </li>
        <li data-target="#myCarousel" data-slide-to="3" class="client-4">
            <a href="#">
                <img src="" class="" alt="" title="">
            </a>
        </li>
        <li data-target="#myCarousel" data-slide-to="4" class="client-5">
            <a href="#">
                <img src="" class="" alt="" title="">
            </a>
        </li>
    </ul>
</div>

#myCarousel {
    .nav-pills {
        >li {
            &.client-1 {
                &.active {
                    &:before {
                        border-color: transparent transparent #FACC00 transparent;
                    }
                }
            }
            &.client-2 {
                &.active {
                    &:before {
                        border-color: transparent transparent #685742 transparent;
                    }
                }
            }
            &.client-3 {
                &.active {
                    &:before {
                        border-color: transparent transparent #E2EDC3 transparent;
                    }
                }
            }
            &.client-4 {
                &.active {
                    &:before {
                        border-color: transparent transparent #138B95 transparent;
                    }
                }
            }
            &.client-5 {
                &.active {
                    &:before {
                        border-color: transparent transparent #FAA41A transparent;
                    }
                }
            }
        }
    }
}

$(document).ready(function () {
    $('#myCarousel').carousel({
        interval: 4000
    });

    var clickEvent = false;
    var currentColor = $('#myCarousel .nav li.active:before').css('border-color');
    $('#myCarousel').on('click', '.nav a', function () {
        clickEvent = true;
        $('#myCarousel .nav li').removeClass('active');
        $(this).parent().addClass('active').parent('.nav').css('border-color', currentColor);
    }).on('slid.bs.carousel', function (e) {
        if (!clickEvent) {
            var count = $('#myCarousel .nav').children().length - 1;
            var current = $('#myCarousel .nav li.active');
            current.removeClass('active').next().addClass('active');
            var id = parseInt(current.data('slide-to'));
            if (count == id) {
                $('#myCarousel .nav li').first().addClass('active');
            }
        }
        clickEvent = false;
    });
});

Answer 1

对于this post，您不能访问jQuery中的: are和:after，因为它们不是DOM的一部分。此外，为了使用样式:在:前面和:后，您应该添加内容：‘'；到它。否则，样式将不会显示在所有浏览器中。

您可以向元素中添加数据颜色，然后使用此信息。但我认为你不会对此感到高兴，因为你将不再有风格和html的分离。

另一个选项是向指定活动元素的父元素中添加类。例如，addClass('client-1')，然后您可以分配像ul.client-1 {}这样的样式。如果元素被更改，您必须再次删除它。