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;
}