编辑标签explorer.js

Question

我想删除显示在由tag-explorer.js生成的标签左侧的字母。我怎样才能做到这一点？

这里的直播网站：https://ewelinawoloszyn.github.io/Research/research_03.html

这里的脚本：

// The container to hold the tags. 
tagContainer = document.querySelector('.tag-container'); 
// An array of objects where the `'element'` property is the article element (to 
// be hidden), and the `'tags'` attribute is an array of tags on this article. 
// Articles do not necessarily have to be the <article> element. 
articles = [].slice.call(document.querySelectorAll('article')).map(function (article) { 
    return { 
    'element': article, 
    'tags': [].slice.call(article.querySelectorAll('.tags li')).map(function (tag) { 
    return tag.textContent; 
    }) 
    }; 
}); 
// Create an array of tag names to be available for filtering. 
tagNames = ['Public Finance', 'Access', 'Data','Money','Open Source']; 
// Initialise tag-explorer. 
tagExplorer(tagContainer, articles, tagNames); 

下面是所需的输出 - 我喜欢红色的交叉字母被删除：

任何建议非常感谢。

更改此：

Answer 1

您可以通过在文件style.css改变一些风格隐藏这些字母

.tag-container .letter-header { 
    display: inline-block; 
    padding: 0 1em; 
} 
.tag-container button { 
    background-color: #AAA; 
    color: #fff; 
    -moz-border-radius: 0 3px 3px 0; 
    -webkit-border-radius: 0 3px 3px 0; 
    border-radius: 0 3px 3px 0; 
    border: 0px; 
    padding: 1px 6px; 
} 

这种变化（标有/* .. */）：

.tag-container .letter-header { 
    display: none; /* <!-- modified */ 
    padding: 0 1em; 
} 
.tag-container button { 
    margin: 0 5px;  /* <!-- added */ 
    background-color: #AAA; 
    color: #fff; 
    -moz-border-radius: 0 3px 3px 0; 
    -webkit-border-radius: 0 3px 3px 0; 
    border-radius: 0 3px 3px 0; 
    border: 0px; 
    padding: 1px 6px; 
} 

的第一次更改会导致字母不被渲染。没有进一步的改变，这会使标签（按钮）彼此粘在一起。第二个改变处理这个问题，并在它们之间引入一个空的空间。