Adding css when addClass() occurs

Question

Below is a 'minimally' revised verison of this bootstnipp sample carousel:
https://bootsnipp.com/snippets/VolV

I added sass to give a colored border-notch to the 'active' list item. I am trying to edit the javascript file to change the border-notch when the 'active' class is changed/added to a new list item. I have attempted to, first, create a variable to store the currentColor of the 'active' list item's border notch, then, change the parent ul's border-color to correspond with the 'active' list item's border notch color.

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

Schlumpf · Accepted Answer · 2017-06-20T16:48:40.863

Regarding to this post you can't access :before and :after in jQuery as they are not part of the DOM. Furthermore in order to use styles in :before and :after you should add content: ' '; to it. Otherwise the style won't be shown in all browsers.

You could add data-color to the element and then use this information. But I think you won't be happy with this, because you won't have a seperation of style and html anymore.

Another option would be to add a class to the parent element that specifies the active element. For example addClass('client-1') and then you could assign styles like ul.client-1 {}. If the element is changed you have to remove it again.

Adding css when addClass() occurs

1 Answers1