css - 次の要素をクリックすると元の色に戻ります

Question

私はビデオのプレイリストを持っており、ばかげているのは私のコードです:

$(function() {
    $("#playlist li").on("click", function() {
        $("#videoarea").attr({
            "src": $(this).attr("movieurl"),
            "poster": "",
            "autoplay": "autoplay"
        });
        $(this).css( "color", "red" );
    });

    $("#videoarea").attr({
        "src": $("#playlist li").eq(0).attr("movieurl"),
        "poster": $("#playlist li").eq(0).attr("moviesposter")
    });
});

li私の要件は、次の要素、つまりリストの次の要素をクリックしたときに、前のli要素を以前に指定した元のデフォルトの色に戻すことです。どうすればこれを達成できますか?

Answer 1

次のような特定のクラスを追加できます。

$("#playlist li").on("click", function() {
    $("#videoarea").attr({
        "src": $(this).attr("movieurl"),
        "poster": "",
        "autoplay": "autoplay"
    });
    $("#playlist li.active").removeClass("active");
    $(this).addClass("active");
})

次に、activeクラスのスタイルを設定します。

.active {
    color: red;
}