編集タグ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; 
} 

最初に変更すると、レンダリングされない文字が表示されます。それ以上の変更がなければ、これはタグ（ボタン）を互いに固着させる。 2番目の変更はこれを処理し、それらの間に空のスペースを導入します。