実現したいこと
ボタンを押したらボタンに対応した記事が表示されるようなコンテンツについて、
添付の画像のように、表示された最後の記事だけborder-bottom:0にしたいです。
buttonタグのvalue属性と、カテゴリアイコン(.icon)のクラス名を対応させて表示させています。
発生している問題・分からないこと
単純に「.list-item」に「:last-child」でCSSを指定してもうまくいかず、他に代案が思いつかず、困っています。ご教授いただけますと幸いです。
該当のソースコード
<!-- CSS --> .icon{ border: 1px solid; font-size: 12px; margin-right: 1em; } .list-item{ border-bottom: 1px solid; padding: .5em; } </style> <!-- HTML --> <div class="btn-group"> <button class="btn" value="all" type="button">全カテゴリ</button> <button class="btn" value="one" type="button">カテゴリ1</button> <button class="btn" value="two" type="button">カテゴリ2</button> <button class="btn" value="three" type="button">カテゴリ3</button> </div> <ul class="list"> <li class="list-item"><span class="icon one">カテゴリ1</span>内容1内容1内容1</li> <li class="list-item"><span class="icon two">カテゴリ2</span>内容2内容2内容2</li> <li class="list-item"><span class="icon two">カテゴリ2</span>内容2内容2内容2</li> <li class="list-item"><span class="icon three">カテゴリ3</span>内容3内容3内容3</li> <li class="list-item"><span class="icon three">カテゴリ3</span>内容3内容3内容3</li> <li class="list-item"><span class="icon three">カテゴリ3</span>内容3内容3内容3</li> </ul> <!-- JS --> $(function () { $(".btn").click(function () { let target = $(this).attr("value"); $(".list-item").each(function () { $(this).animate({ "opacity": 0 }, 300, function () { $(this).hide(); if ($(this).find(".icon").hasClass(target) || target == "all") { $(this).show().animate({ "opacity": 1 }, 300); } }) }) }) })
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
teratailで「フィルタリング 〇〇」等検索しましたが、同様の質問が見つかりませんでした。
補足
※jQueryは最新のバージョンを使用しております。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/02/17 03:51