Q&A
前提・実現したいこと
現在静的なメディアサイトを制作しており、記事のソートのためにjsを実装しています。
構成としては2カラムで、「サイドバーにカテゴリから選ぶ」といった感じでカテゴリが並んでいます。
実現したいことは以下の2つです。
- 記事一覧に並んでいる記事が属しているカテゴリだけサイドバーに表示させる
- サイドバーに並んでいるカテゴリをクリックするとクリックしたカテゴリの記事だけ表示される
色々と調べて、hasClass・addClass・removeClassを使用して表示非表示を制御しようと思っております。
発生している問題・エラーメッセージ
テストとして別のHTMLを組んで試してみたところ、思ったような挙動になったので、本番のHTMLで反映させてサーバーにアップしました。しかし全く効いておらず…。
何かエラーが出てるかもと確認してみましたが、エラーメッセージなどはありませんでした。
該当のソースコード
記事の表示非表示は.article_onと.article_off、カテゴリの表示非表示は.list_onと.list_offで制御しています。
■HTML
<body id="trend" class="index"> <a id="pagetop"></a> <div class="wrapper"> <!-- .header --> <header class="include"> </header> <!-- // .header --> <!-- .main --> <main> <div class="container"> <!-- .contents --> <div class="contents"> <h2>記事一覧</h2> <!-- .article_list --> <div class="article_list"> <ul> <!-- li --> <li class="article-a"><!--このクラス名で表示非表示を制御--> <a class="link_box" href="記事URL"> <div class="inner"> <div class="thumb"><img src="images/hoge.jpg"></div> <!-- .detail --> <div class="detail"> <p>カテゴリA</p> <h3>記事タイトルA</h3> <p>2020/12/23</p> </div> <!-- // .detail --> </div> </a> </li> <!-- li --> <li class="article-b"><!--このクラス名で表示非表示を制御--> <a class="link_box" href="記事URL"> <div class="inner"> <div class="thumb"><img src="images/hoge.jpg"></div> <!-- .detail --> <div> <p>カテゴリB</p> <h3>記事タイトルB</h3> <p>2020/12/23</p> </div> <!-- // .detail --> </div> </a> </li> <!-- // end : li --> </ul> </div> <!-- // .article_list --> </div> <!-- // .contents --> <!-- #side-area --> <div id="side-area" class="include"> </div> <!-- // #side-area --> </div> </main> <!-- // .main --> <!-- footer --> <footer class="include"> </footer> <!-- // footer --> </div> </body>
■サイドバー部分
<!-- .category_list --> <div class="category_list"> <h3>カテゴリから選ぶ</h3> <div class="select_list"> <div class="block category1"> <h4 class="acd-tgl">種類<span class="icon-btn">＋</span></h4> <div class="menu-sub"> <ul> <li class="category-a"><span class="btn">カテゴリA</span></li> <li class="category-b"><span class="btn">カテゴリB</span></li> <li class="category-c"><span class="btn">カテゴリC</span></li> <li class="category-d"><span class="btn">カテゴリD</span></li> <li class="category-e"><span class="btn">カテゴリE</span></li> </ul> </div> </div> </div> </div> <!-- .category_list -->
■js
$(window.onload = function () { if ($('main *').children().hasClass('article-a')) { $('.category-a').removeClass('list_off'); $('.category-a').addClass('list_on'); } else { $('.category-a').removeClass('list_on'); $('.category-a').addClass('list_off'); } $(document).on("click", ".category-a", function () { $('.article_list ul li').addClass('article_off'); $('.article-a').removeClass('article_off'); $('.article-a').addClass('article_on'); }); });
試したこと
テストとして作ったHTMLとjsが以下になります。
これはきちんと動きました。
<script> $(function () { if ($('body').find('*').hasClass('article_a')) { $('.test_list--a').removeClass('list_off'); $('.test_list--a').addClass('list_on'); } else { $('.test_list--a').removeClass('list_on'); $('.test_list--a').addClass('list_off'); } if ($('body').find('*').hasClass('article_b')) { $('.test_list--b').removeClass('list_off'); $('.test_list--b').addClass('list_on'); } else { $('.test_list--b').removeClass('list_on'); $('.test_list--b').addClass('list_off'); } if ($('.article').children().hasClass('article_c')) { $('.test_list--c').removeClass('list_off'); $('.test_list--c').addClass('list_on'); } else { $('.test_list--c').removeClass('list_on'); $('.test_list--c').addClass('list_off'); } $(document).on("click", ".test_list--a", function () { $('.article p').addClass('article_off'); $('.article_a').removeClass('article_off'); $('.article_a').addClass('article_on'); }); $('.test_list--b').on('click', function () { $('.article p').addClass('article_off'); $('.article_b').removeClass('article_off'); $('.article_b').addClass('article_on'); }); $('.test_list--c').on('click', function () { $('.article p').addClass('article_off'); $('.article_c').removeClass('article_off'); $('.article_c').addClass('article_on'); }); $('.test_list--all').on('click', function () { $('.article p').removeClass('article_off'); $('.article p').addClass('article_on'); }); }); </script> </head> <body> <div id="sample"> <div class="text_a"> <p>サンプルAです</p> </div> <div class="text_b"> <p>サンプルBです</p> </div> <div class="text_c"> <p>サンプルCです</p> </div> </div> <div> <p class="test_list test_list--a">テストリストAです。</p> <p class="test_list test_list--b">テストリストBです。</p> <p class="test_list test_list--c">テストリストCです。</p> <p class="test_list--all">全部表示</p> </div> <div class="article"> <div> <ul> <li> <p class="article_a">Aに関する記事です。</p> <p class="article_b">Bに関する記事です。</p> <p class="article_c">Cに関する記事です。</p> <p class="article_a">Aに関する記事です。</p> <p class="article_b">Bに関する記事です。</p> <p class="article_c">Cに関する記事です。</p> <p class="article_a">Aに関する記事です。</p> <p class="article_b">Bに関する記事です。</p> <p class="article_c">Cに関する記事です。</p> </li> </ul> </div> </div> </body>
他にも、.children().hasClass()ではなく以下のように変えて試してみましたが変わりませんでした。
if ($('body').find('*').hasClass('category-a')) {
補足情報
サイドバーに関しては別HTMLをインクルードする形で読み込んでいます。
あなたの回答
tips
プレビュー
