List-item not changing style correctly JQuery

Question

I would like to ask a question about JQuery, which I've recently started to use.

I have an ol list, and I would like to change the background and font color of selected list-item (active list item). So I've written a code like this :

 $('.cart-list ol li').on('click', function() { $('.active-cart-list').removeClass('active-cart-list'); $(this).addClass('active-cart-list'); }); 

 .cart-list ol li { margin-top: 1px; padding: 5px 16px 5px 16px; font-size: 16px; font-family: 'Lato'; font-weight: bold; color: #000; text-transform: uppercase; } .cart-list ol li>span { text-align: left; margin-left: 28px; } .cart-list ol li { cursor: pointer; } .cart-list ol li.active-cart-list { background-color: #e571c5; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="cart-list"> <ol> <li class="active-cart-list"><span>lorem1</span> </li> <li><span>lorem2</span> </li> <li><span>lorem3</span> </li> <li><span>lorem4</span> </li> <li><span>lorem5</span> </li> <li><span>lorem6</span> </li> <li><span>lorem7</span> </li> </ol> </div> 

List items change their color properly once list is scrolled down, but I can't expect to have a scroll on every list at that website. I would be really pleased to get any help.

Cheers

Answer 1

Unfortunately, I don't think this is not a jQuery problem, it's a CSS one.

List bullets/numbers are hard to change once set...this is probably an excellent case for CSS Counters.

 $('.cart-list ol li').on('click', function() { $('.active-cart-list').removeClass('active-cart-list'); $(this).addClass('active-cart-list'); }); 

 .cart-list ol li { margin-top: 1px; padding: 5px 16px 5px 16px; font-size: 16px; font-family: 'Lato'; font-weight: bold; color: #000; text-transform: uppercase; } ol { counter-reset: numbers; list-style-type: none; } li::before { counter-increment: numbers; content: counters(numbers, "")". "; } .cart-list ol li>span { text-align: left; margin-left: 28px; } .cart-list ol li { cursor: pointer; } .cart-list ol li.active-cart-list { background-color: #e571c5; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="cart-list"> <ol> <li class="active-cart-list"><span>lorem1</span> </li> <li><span>lorem2</span> </li> <li><span>lorem3</span> </li> <li><span>lorem4</span> </li> <li><span>lorem5</span> </li> <li><span>lorem6</span> </li> <li><span>lorem7</span> </li> </ol> </div>