プレイリストをクリックしたときにメディアプレーヤーを表示する

Question

プレイリストの項目をクリックすると、プレイヤーを画面の下部に表示させようとしています。私はこのコードを書いた：

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

}）;

私は現在、playerHolderをdisplay：noneに設定しています。しかし、私はそれを表示するに切り替える：playlistItemのクリックでフレックスしたい。何か案は？

Answer 1

表示/非表示のクラスを切り替えることも、2つの別々のクラスを設定することもできます。インラインスタイルを追加することもできますが、クラスを切り替えることは「より良い」と思います。

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