javascript - 列表项未正确更改样式 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>