Klasse zu aktuellen und vorherigen Listenelementen hinzufügen

Question

Ich habe eine ungeordnete Liste, die als Menü zum Abspielen von Abschnitten eines Videos verwendet wird. Das angezeigte Listenelement (Videoabschnitt) wird hervorgehoben, wenn Sie darauf klicken, indem Sie eine Klasse hinzufügen und die Klasse aus einem anderen Listenelement entfernen. Ich wurde vom Kunden gebeten, dies so zu ändern, dass beim Klicken auf ein Element auch die vorherigen Listenelemente ausgewählt werden. Wenn Sie nämlich auf Vid 2 klicken, erhalten Vid 1 und Start die Klasse 'selected' sowie Vid 2. Wenn Sie auf Vid 3 klicken, werden Vid 3, Vid 2, Vid 1, Start usw. hervorgehoben.

Ich möchte auch die ausgewählte Klasse aus jedem Listenelement, das vor dem angeklickt Element ist. Wenn beispielsweise Vid 4 ausgewählt ist und der Benutzer auf Vid 2 klickt, wird die ausgewählte Klasse aus Vid 4 und Vid 2 entfernt, Vid 1 und Start haben die Klasse ausgewählt. Tut mir leid, wenn das alles wenig Sinn macht und danke im voraus.

$("#select li a").click(function() { 
 
    $(this).parent().addClass('selected').siblings().removeClass('selected'); 
 
});

#video-controls ul li { 
 
\t cursor: pointer; 
 
} 
 

 
#video-controls ul li a { 
 
\t color: #5f6a72; 
 
\t text-decoration: none; 
 
\t display: block; 
 
} 
 

 
#video-controls ul li.selected, 
 
#video-controls ul li.selected a { 
 
\t color: #00aad2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<nav id="video-controls"> 
 
    <ul id="select"> 
 
    <li id="start"><a href="#/">Start</a></li> 
 
    <li id="vid-1"><a href="#/">Vid 1</a></li> 
 
    <li id="vid-2"><a href="#/">Vid 2</a></li> 
 
    <li id="vid-3"><a href="#/">Vid 3</a></li> 
 
    <li id="vid-4"><a href="#/">Vid 4</a></li> 
 
    </ul> 
 
</nav>

Answer 1

können Sie

1) Traverse und alle bisherigen Elemente erhalten.

2) verwenden .andSelf() klickten Objekt Mutter

3) hinzuzufügen Klasse auf alle Elemente zurück oben ausgewählten hinzuzufügen.

4) finden Geschwister andere als zurück Element verbleibenden in Schritt 2

5) entfernen Klasse ausgewählt

$("#select li a").click(function() { 
 
$(this).parent().prevAll().andSelf().addClass('selected').filter(':last').nextAll().removeClass('selected'); 
 
});

#video-controls ul li { 
 
\t cursor: pointer; 
 
} 
 

 
#video-controls ul li a { 
 
\t color: #5f6a72; 
 
\t text-decoration: none; 
 
\t display: block; 
 
} 
 

 
#video-controls ul li.selected, 
 
#video-controls ul li.selected a { 
 
\t color: #00aad2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<nav id="video-controls"> 
 
    <ul id="select"> 
 
    <li id="start"><a href="#/">Start</a></li> 
 
    <li id="vid-1"><a href="#/">Vid 1</a></li> 
 
    <li id="vid-2"><a href="#/">Vid 2</a></li> 
 
    <li id="vid-3"><a href="#/">Vid 3</a></li> 
 
    <li id="vid-4"><a href="#/">Vid 4</a></li> 
 
    </ul> 
 
</nav>