單擊時更改 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>