单击时更改 ul 中元素的颜色，但在单击另一个 ul 的元素时保留它

Question

有一个任务是改变ul里的li的颜色，但是只在一个特定的ul里，当你点击另一个ul里的li时，旧的li是不会丢失的。 如何在没有 Id 的情况下实现这一点，因为 UL 通过循环是 output 并且可以有无限数量的。

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

 li { cursor: pointer; } li.active { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul class="list"> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>

Answer 1

您需要以某种方式区分您的 uls。 我不明白为什么您不能使用 ID，但还有其他选择。

1. 添加 list1/list2 的 class 并仅针对必要的列表。

2.您可以在 jQuery 和 CSS 中使用：nth-child()。 因此，如果您只希望在单击第一个 ul 的 li 时发生该操作，您可以这样做：

 $('.list:nth-child(1)').on('click', 'li', function() { $('.list li').removeClass('active'); $(this).addClass('active'); });

 li { cursor: pointer; } li.active { color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul class="list"> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>