もっと見るのボタンが反応せずもっと見れません

前提

jQueryでもっと見るのボタンを実装しようとしています。
もっと見るのボタンが押しても反応しないです。

実現したいこと

もっと見るボタンを押して4つ→8つにリストを増やしたいです。

発生している問題・エラーメッセージ

  • more のボタンを押しても反応しません

該当のソースコード

HTML

<section id="works" class="section-works"> <h2># WORKS</h2> <div class="works-list"> <ul class="list"> <li class="list-item"> <img src="assets/image/bike_site_image.png" alt="自転車紹介サイト"> <p>bikeプロフィール(架空サイト)</p> </li> <li class="list-item"> <img src="assets/image/furniture_design_site.png" alt="f家具サイト"> <p>家具のオンラインショッピング(架空サイト)</p> </li> <li class="list-item"> <img src="assets/image/my_works_site.png" alt="仕事のサイト"> <p>My Works(架空サイト)</p> </li> <li class="list-item"> <img src="assets/image/travel_blog_site.png" alt="トラベルサイト"> <p>トラベルサイト(架空サイト)</p> </li> <li class="list-item"> <img src="assets/image/site_list04.png" alt="DHWスポーツサイト"> <p>家具のオンラインショッピング(架空サイト)</p> </li> <li class="list-item"> <img src="assets/image/site_list02.png" alt="プロフィールサイト"> <p>プロフィールサイト</p> </li> <li class="list-item"> <img src="assets/image/site_list03.png" alt="スグ食べ"> <p>スグ食べ(架空サイト)</p> </li> <li class="list-item"> <img src="assets/image/site_list01.png" alt="美容室A.R.E.(プライベートワーク)"> <p>美容室A.R.E.(プライベートワーク)</p> </li> </ul> <div class="list-btn"> <button>+ More</button> </div> </div> </section>

CSS

.list-item{ opacity: 1;}.list-item.is-hidden { opacity: 0; height: 0; margin: 0;}.list-btn { margin-top: 20px;}.list-btn.is-btn-hidden{ display:none;}.list-btn button { background-color: #e7c9e0; color:#2b2a2b; height: 50px; width: 180px; border-radius: 50px; border: none; cursor: pointer; outline: none; padding: 0; line-height: 32px;}

js

var moreNum = 4; $('.list-item:nth-child(n + ' + (moreNum + 1) + ')').addClass('is-hidden'); $('.list-btn').on('click', function() { $('.list-item.is-hidden').slice(0, moreNum).removeClass('is-hidden'); if ($('.list-item.is-hidden').length == 0) { $('.list-btn').fadeOut(); } }); $(function() { var list = $(".list li").length; if (list < moreNum) { $('.list-btn').addClass('is-btn-hidden'); }});

補足情報(FW/ツールのバージョンなど)

HTML5/CSS3
https://web.runland.co.jp/blog_cate2/post-4137
このサイトの二個目の動きを入れようと思いました。

コメントを投稿

0 コメント