編輯標籤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; 
} 

的第一次更改會導致字母不被渲染。沒有進一步的改變，這會使標籤（按鈕）彼此粘在一起。第二個改變處理這個問題，並在它們之間引入一個空的空間。