該当するタグのコンテンツを表示する

Question

前提・実現したいこと

大量のコンテンツの中から、選択されたタグが含まれるコンテンツのみを表示したい

具体的に言うと・・・

コンテンツ	タグ１	タグ２	タグ３
りんご	果物	日本語	植物
オレンジ	果物	英語	植物
チョコ	お菓子	英語	食品
・・・

というような「大量のコンテンツがあって、同じページ内の選択フォームで選択されたタグによって表示するものを変更する」ということをしたいです。

※異なるタグに同じタグ名称が出てくることはないです。

EX）タグ１で果物を選択した場合、りんごとオレンジは表示されるが、チョコは表示しない
EX）タグ２で英語を選択した場合、オレンジとチョコは表示されるが、りんごは表示しない
EX）タグ１で果物を選択し、タグ２で日本語を選択した場合、りんごだけが表示される

といった感じです。

ただし、コンテンツの中に詳細を記載するので、ページ内のテキストをそのまま検索する方法ではない方法にしたいです。

不明点

フォームで選択肢を作ることはできたのですが、タグを設定するところからの方法がわかりませんでした。

Answer 1

ラジオボタンかチェックボックスで絞り込みをすればいいでしょう

• sample

<style>
.hide{display:none;}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  document.querySelectorAll('.items').forEach(x=>x.classList.add('hide'));
  document.querySelectorAll('.tag').forEach(x=>{
    x.addEventListener('change',()=>{
      var selector=[...document.querySelectorAll('.tag:checked')].filter(x=>x).map(x=>"."+x.value).join("");
      document.querySelectorAll('.items').forEach(x=>x.classList.toggle('hide',![...document.querySelectorAll(selector)].includes(x)));
    });
  });
  
});
</script>
<dl>
<dt>タグ1</dt>
<dd><label><input type="radio" class="tag" name="tag1" value="fruit">果物</label></dd>
<dd><label><input type="radio" class="tag" name="tag1" value="sweet">お菓子</label></dd>
<dt>タグ2</dt>
<dd><label><input type="radio" class="tag" name="tag2" value="japanese">日本語</label></dd>
<dd><label><input type="radio" class="tag" name="tag2" value="english">英語</label></dd>
<dt>タグ3</dt>
<dd><label><input type="radio" class="tag" name="tag3" value="plant">植物</label></dd>
<dd><label><input type="radio" class="tag" name="tag3" value="food">食品</label></dd>
</dl>
<hr>
<div class="items fruit japanese plant">りんご</div>
<div class="items fruit english plant">オレンジ</div>
<div class="items sweet english food">チョコ</div>

Comments

[Ito_Kazuki_]

ラジオボタンでの絞り込みの方法がわからないのです。

[Ito_Kazuki_]

ありがとうございます！
あと、これをラジオボタンではなく、セレクトにしたかったのですが、それは自分で何とかやってみます。

[yambejp]

セレクトボックスならこんな感じ

<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('.items').forEach(x=>x.classList.add('hide'));
document.querySelectorAll('.tag').forEach(x=>{
x.addEventListener('change',()=>{
var selector=[...document.querySelectorAll('.tag')].filter(x=>x.value!=="").map(x=>"."+x.value).join("");
document.querySelectorAll('.items').forEach(x=>x.classList.toggle('hide',![...document.querySelectorAll(selector)].includes(x)));
});
});
});
</script>
<select name="tag1" class="tag">
<option value="">タグ1</option>
<option value="fruit">果物</option>
<option value="sweet">お菓子</option>
</select>
<select name="tag2" class="tag">
<option value="">タグ2</option>
<option value="japanese">日本語</option>
<option value="english">英語</option>
</select>
<select name="tag3" class="tag">
<option value="">タグ3</option>
<option value="plant">植物</option>
<option value="food">食品</option>
</select>

Answer 2

フォームで選択肢を作ることはできた

のならば、後は以下の関数を呼び出すだけ

<table id="T">
  <tr><td>A <td>a
  <tr><td>B <td>b
</table>


<script>
function dispRows (table, cellIndex, str) {
  [...table.querySelectorAll (`td:nth-of-type(${cellIndex})`)].forEach (e=>
    e.closest ('tr').style.display = e.textContent.trim() == str ? 'table-row': 'none')
}

dispRows (T, 2, 'b');
</script>