单击播放列表时显示媒体播放器

Question

我正在尝试让我的播放器仅在点击播放列表中的项目时显示在屏幕底部。我写了这段代码：

$(document).on("click", function(e){
if($(e.target).is(".playlistItem")){
  $(".playerHolder").show();
}else{
    $(".playerHolder").hide();
}

}）;

我目前将playerHolder设置为display：none。但我希望它切换到display：flex on click playlistItem。有什么想法吗？

Answer 1

您可以切换显示/隐藏类或具有两个单独的类。你也可以添加内联样式，但我相信切换类是“更好”。

CSS

.playerHolder-hidden {
    display: none;
}
.playerHolder-show {
    display: flex;
}

jquery

$(document).on("click", function(e){
if($(e.target).is(".playlistItem")){
    $(".playerHolder").addClass("playerHolder-show").removeClass("playerHolder-hidden");
}else{
    $(".playerHolder").addClass("playerHolder-hidden").removeClass("playerHolder-show");
}

修改
从评论

更新了jquery

$(document).on("click", function(e){
if($(e.target).is(".playlistItem")){
    $(".playerHolder").addClass("playerHolder-show").removeClass("playerHolder-hidden");
}