목록에서 유일한 "활성" 항목을 업데이트하려면 어떻게 해야 합니까?

Question

4개의 요소가 있다고 가정하고 그 중 하나만 클래스 이름을 가질 수 있습니다active. 활성 요소는 초당 여러 번 업데이트됩니다(여기에 더미 예가 있습니다).

간단한 방법은 다음과 같습니다.

• 모든 요소에서 제거active
• 현재 선택된 요소로 active을 설정합니다

문제는 선택한 요소 변경되지 않은 경우 클래스 이름을 제거하고 재설정 (잠재적으로 디스플레이 결함을 일으킬 수 있음)한다는 점입니다. 이는 말이 되지 않습니다.

물론, 여전히 선택된 요소인 경우 제거하지 않는 또 다른 규칙을 추가할 수 있지만 코드 읽기가 어려워집니다.

질문: 이 문제를 해결할 수 있는 표준 모드가 있나요?

으아아아 으아아아 으아아아

Answer 1

요약

그러면 요소 집합에 대해 active 클래스를 추가하고 제거하는 더 우아한 방법을 찾고 있는 것 같습니다. 모든 요소에서 active 클래스를 제거한 다음 현재 활성 요소에 다시 추가하는 대신(active类，然后将其添加回当前活动元素（这可能会导致潜在的问题/视觉故障）。而且似乎你正在尝试避免添加太多的代码来检查是否需要删除/添加active이로 인해 잠재적인 문제/시각적 결함이 발생할 수 있음). 그리고 active 클래스를 제거/추가해야 하는지 확인하기 위해 너무 많은 코드를 추가하지 않으려고 하는 것 같습니다(활성 요소가 변경되지 않은 경우

).

잠재적인 솔루션

개인적으로는 이것이 최선의 접근 방식이라고 생각하지 않습니다(코드 실행에 삼항 연산자를 사용하는 것은 지저분할 수 있습니다

). 하지만 코드는 충분히 간단하고 전반적으로 꽤 읽기 쉽다고 생각합니다.

active类。 add()函数只会在元素当前没有该类时添加类，而remove()函数则相反（仅在类存在时删除类）。这意味着你可以在活动元素上调用add()기본적으로 활성 요소가 변경되지 않으면 시각적 결함에 대한 걱정 없이 코드를 병합하여

기능을 추가하거나 제거할 수 있습니다.

이 논리를 사용하면 모든 가능한 요소를 반복한 다음 ternaryadd()（如果活动元素没有更改，这不会有影响），否则调用remove()연산자를 사용하여 요소가 현재 활성 요소인지 확인할 수 있습니다. 그렇다면 add()를 호출하세요(

활성 요소가 변경되지 않은 경우 아무 효과가 없습니다

). 그렇지 않으면 remove()를 호출하세요.

으아아아 으아아아 으아아아

메모 이는 모든 item开头的id가능한

활성 요소를 반복할 수 있다고 가정합니다. 이 경우에는 둘 다 🎜를 갖습니다. 가능한 모든 활성 요소를 반복하는 데 사용할 수 있는 식별자가 없으면 더 많은 코드를 추가해야 합니다. 🎜