单击下一个元素时更改颜色

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