單擊播放列表時顯示媒體播放器

Question

當前正在嘗試讓播放器僅在播放列表中的某個項目單擊時顯示在屏幕底部。我寫了這段代碼：

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

}）;

我目前有playerHolder設置爲顯示：無。但我希望它切換到顯示：單擊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"); 
}