Q&A
ありがとうございます。
確かにそちらの方が簡単そうですね！
下記のソースで①〜③のような動作を実現させたいのですが、
①あらかじめロード時に最初の５枚の画像は表示させる
②もっと見るボタンをクリックするたびに５枚の画像が横並びで出る
③最後まで終わるともっと見るのボタンが消える。
変数imgLoadで取得される値とif文の中の5の意味がわかりません。
（コメントアウトの箇所です）
こちらご教授いただけますでしょうか。
<!DOCTYPE html> <html xml:lang="ja" lang="ja"> <head> <meta charset="utf-8"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <style> #wrapper { margin: 0 auto; padding: 80px 0; width: 800px; text-align: left; } #loadArea { margin: 0 auto; width: 800px; text-align: left; } #loadArea img { margin: 0 5px 10px 5px; width: 150px; opacity: 0; } #moreBtn { margin: 20px auto; padding: 15px 0; width: 800px; color: #fff; font-weight: bold; text-align: center; display: block; background: #777; transition: all 0.2s linear; } #moreBtn:hover { background: #999; } </style> <script> $(function(){ $('#imgLoad').append('<div id="loadArea"></div><a href="javascript:void(0);" id="moreBtn">' + 'もっと見る' + '</a>'); $('#moreBtn').click(function(){ var loadImg = $('#imgLoad').find('img'), imgLength = loadImg.length; if(imgLength + 5 < 25){ //imgLength +5の５の意味がわからない。表示されている画像の数であれば、変数imgLengthだけで良いのではないかと思う。 console.log(imgLength); //ロード時が０になるのがわからない。ロード時に表示される５枚があるから５が正しいのではないかと思う。 //ロード時：０、１回ボタンをクリックで５、２回目で１０、３回目で１５、４回目で２０となる。 $.each(new Array(5),function(i){ $('#imgLoad').find('#loadArea').append('<img src="' + 'img/photo' + (imgLength + (1+i)) + '.jpg'+'">' ); }); }else if(imgLength +5 >= 25){ $.each(new Array(25-$('#imgLoad').find('#loadArea').find('img').length),function(i){ $('#imgLoad').find('#loadArea').append('<img src="' + 'img/photo' + (imgLength + (i+1)) + '.jpg' + '">'); }); $('#imgLoad').find('#moreBtn').remove(); } $('#imgLoad').find('#loadArea').find('img').on('load',function(){ $(this).animate({opacity:'1'},1000); }); }); $(window).load(function(){ $('#imgLoad').find('#moreBtn').click(); }); }); </script> </head> <body> <div id="wrapper"> <div id="imgLoad"></div> </div><!-- /#wrapper --> </body> </html>
回答2件
0
ベストアンサー
JavaScript
1if(imgLength + 5 < 25){ // 「ここから後に5枚追加するコードがあるので、それを含めた画像枚数が25を超えない場合」という処理。
ロード時が０になるのがわからない。ロード時に表示される５枚があるから５が正しいのではないかと思う。
ロード時は下記内容なので、1枚も無い。そのコメント以降のコードで画像を追加しているからロードしたときに表示されている。
HTML
1<div id="imgLoad"></div>
投稿2016/07/06 06:08
総合スコア69400
0
ソース的に全部記載しておいて非表示にしておき、
ボタンを押すたびに該当する非表示領域を表示していくのが楽だと思います
ページングを絡めたいのであればボタンをおすたびにajaxで追加領域の
ソースを読み込んできてもよいと思います
投稿2016/07/06 05:43
総合スコア114779
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/07/06 06:55