列表项没有正确改变样式JQuery

Question

我想问一个关于JQuery的问题，我最近开始使用它。

我有一个ol列表，我想更改所选列表项（活动列表项）的背景和字体颜色。所以我写了这样的代码：

$('.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>

一旦列表向下滚动，列表项会正确地改变颜色，但我不能指望在该网站的每个列表上都有滚动。我很乐意得到任何帮助。

干杯

Answer 1

不幸的是，我不认为这不是一个jQuery问题，它是一个CSS。

列出项目符号/数字一旦设置就很难改变......这可能是CSS计数器的一个很好的例子。

$('.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>