やりたいこと
・リストの初期表示は2個で、もっと見るボタンを押したら2個ずつ表示される
・リストの数は最大いくつになるかわからない
・リストが最大まで表示されたらもっと見るボタンを非表示にする
という実装をjQuery無しで実装したいのですが、
さっぱりわからず、、、
すみませんが、教えていただきたいです。
html
1<ul class="list"> 2 <li class="item">リスト1</li> 3 <li class="item">リスト2</li> 4 <li class="item">リスト3</li> 5 <li class="item">リスト4</li> 6 <li class="item">リスト5</li> 7 <li class="item">リスト6</li> 8 <li class="item">リスト7</li> 9</ul> 10<div class="btn">もっと見る</div>
javascript
1const listContents = document.getElementsByClassName('item').length; 2const List = document.querySelector('.item'); 3const btnMore = document.querySelector('.btn'); 4if(listContents <= 2){ 5 btnMore.style.display = 'none'; 6} else { 7 btnMore.addEventListener("click", function(e) { 8 //ボタン押したら2個ずつ表示 9 }); 10}
いちおう確認ですが「jQueryはJavaScriptのライブラリでPureJavaScriptで書かれている」というのは承知の上ですよね?
またjQueryで楽に実装できるのでしたらそのほうが良いように思いますがどういった経緯からjQuery記法ではないもので実装されようとしていますか?
適用しているCSSも質問に記載をお願いします。
それで、何をやりたいかがより明確に回答者に伝わると思います。
mts10806さん
ご回答有り難うございます。
普段jQueryのコピペばっかりだったので、いざjQueryが使えない場合がきたら困ると思いネイティブJSの勉強をはじめました。
ですがそもそもjQueryもコピペばっかでしっかり読めないので、まずはjQueryのソースコードを読むことからはじめて少しずつネイティブに変換していくようにします。
miyabi_takatsukさん
ご指摘ありがとうございます。
おっしゃる通りです。
今後、徹底させていただきます。
回答1件
あなたの回答
tips
プレビュー