Question

以下是最低限度的＆＃39;修改了这个bootstnipp样本轮播的verison：
https://bootsnipp.com/snippets/VolV

我添加了sass，为活跃的＆＃39;添加了彩色边框。项目清单。我正在尝试编辑javascript文件，以便在“活动”时更改边框缺口。 class被更改/添加到新列表项。我试图首先创建一个变量来存储＆＃39; active＆＃39;的currentColor。列表项的边界缺口，然后，更改父ul的边框颜色以对应“活动”＆＃39;列出项目的边界缺口颜色。

<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之前和之后，因为它们不是DOM的一部分。此外，为了在以下内容中使用样式：之前和之后应添加内容：'';它。否则，该样式将不会在所有浏览器中显示。

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

另一种选择是将类添加到指定活动元素的父元素。例如addClass（'client-1'）然后你可以分配像ul.client-1 {}这样的样式。如果元素被更改，则必须再次删除它。

发生addClass（）时添加css

1 个答案: