如何在div中僅顯示某些文本？

Question

我正在使用博主創建帖子，帖子布局如下：

帖子標題

標簽

內容

作者

創建具有多個標簽的帖子時，它們將顯示如下，例如：

標簽：另類，新音樂，想象龍

我的問題是，我怎么能在這種情況下只顯示“流派”“替代”，所以它會顯示如下：

標簽：另類

Blogger 不支持 php，所以我相信這必須使用 JavaScript/jQuery 來完成，我可以在其中過濾標簽 div 中的文本。 但是我對此不是很熟練。

為此，非常感謝 Chirag64 的更新！ 任何使用 Blogger 的人都會發現這在選擇某些標簽以顯示在您的帖子中非常有用。

最終產品可以在這里查看：

jsfiddle.net/3apZ4/13/

Answer 1

您可以使用 css 和 jquery 來完成。

1）首先用單獨的div分隔每個標簽

2）在css中為一個類創建一個樣式，比如

    .hidden-class
    {
        display:none;
    }

在 jquery 中，在某些條件下將隱藏類添加到 div。

      $( "id" ).addClass( "hidden-class" );

如果你想刪除

      $( "id" ).removeClass( "hidden-class" );

在 javascript 中添加

        document.getElementById('id').className += 'hidden-class'

去除

       document.getElementById("id").className = document.getElementById("id").className.replace(/\bhidden-class\b/,'');

Answer 2

您可以使用以下 JavaScript 代碼刪除除第一個流派之外的其他流派。

//Remove genres not matching the listOfGenres list
var labels = document.querySelectorAll(".post-labels a");
var listOfGenres = ["Alternative","Pop"];

for (i=0; i < labels.length; i++) {
    if (listOfGenres.indexOf(labels[i].textContent) == -1)
        labels[i].remove();
}

//Remove trailing commas.
var postLabels = document.querySelector(".post-labels");
postLabels.innerHTML = postLabels.innerHTML.replace(/\,/g, "");

工作 JSFiddle 。