html
1 <div class="column-box-wrapper"> 2 <div class="column-box blog"> 3 <a href="#" class="caption"> 4 <div class="column-image" style="background-image: url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/programmer.jpg)"> 5 <div class="zoom-black"></div> 6 </div> 7 </a> 8 <a href="#" class="column-title">プログラミングで広がる可能性</a> 9 <div>コラム</div> 10 </div> 11 <div class="column-box tip"> 12 <a href="#"> 13 <div class="column-image" style="background-image: url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/html5.jpg)"> 14 <div class="zoom-black"></div> 15 </div> 16 </a> 17 <a href="#" class="column-title">HTML5の新タグについて</a> 18 <div>HTML</div> 19 </div> 20 <div class="column-box tip"> 21 <a href="#"> 22 <div class="column-image" style="background-image: url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/js.jpg)"> 23 <div class="zoom-black"></div> 24 </div> 25 </a> 26 <a href="#" class="column-title">Javascriptの文法まとめ</a> 27 <div>Javascript</div> 28 </div> 29 <div class="column-box blog"> 30 <a href="#"> 31 <div class="column-image" style="background-image: url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/books.jpg)"> 32 <div class="zoom-black"></div> 33 </div> 34 </a> 35 <a href="#" class="column-title">プログラミングに挫折しそうになったら読むべき10冊</a> 36 <div>コラム</div> 37 </div> 38 <div class="column-box blog"> 39 <a href="#"> 40 <div class="column-image" style="background-image: url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/engineer.jpg)"> 41 <div class="zoom-black"></div> 42 </div> 43 </a> 44 <a href="#" class="column-title">これから求められるエンジニア人材とは</a> 45 <div>コラム</div> 46 </div> 47 <div class="column-box tip"> 48 <a href="#"> 49 <div class="column-image" style="background-image: url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/practice/portfolio/inspect.jpg)"> 50 <div class="zoom-black"></div> 51 </div> 52 </a> 53 <a href="#" class="column-title">要素の検証をしてみよう</a> 54 <div>HTML / CSS</div> 55 </div> 56 </div> 57 <div class="btn btn-loading">Load More</div> 58 </div> 59 </div>
jquery $('.filter-item').click(function(){ $('.filter-item').removeClass('active') $(this).addClass('active'); var id = $(this).attr('id'); if(id == 'all'){ $('.column-box').show(); }else{ $('.column-box').hide(); $('.column-box').hasClass(id).show(); } })
のjquery
「 $('.column-box').hasClass(id).show();」
だと上手く表示されなくて
「 $('.column-box-wrapper').children('.'+id).show();」
だと上手く表示されるのは何故でしょうか??
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/18 10:43
2017/08/18 10:51
2017/08/18 23:17
2017/08/19 00:35