如何在div中只显示特定的文本？

Question

我正在使用blogger创建帖子，文章布局如下：

职位名称 标签 内容 作者

在创建具有多个标签的帖子时，它们将显示如下所示：

标签:另类音乐，新音乐，想象龙

我的问题是，我如何才能只显示“体裁”在这里的“另类”，所以它将显示如下：

标签:替代

Blogger不支持php，所以我相信使用JavaScript/jQuery可以过滤标签div中的文本。不过，我对此不太在行。

更新非常感谢Chirag64的这一点！任何使用blogger的人都会发现这在选择要显示在您的帖子上的特定标签时非常有用。

最终产品可在这里浏览：

jsfiddle.net/3apZ4/13/

Answer 1

除了第一个类型之外，您可以使用以下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。

Answer 2

您可以使用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/,'');