###前提・実現したいこと
フォトギャラリーのHTMLページで、「もっと見る」を押すと10件ずつ表示されていく仕組みを実装中です。
写真のリスト部分は、jQueryでXMLを読み込み、HTMLに表示させているため、
ページ側に「もっと見る」のJSを書いても効きません。
XMLを読み込むJSかページ側のJS、どちらでもよいのですが、
「もっと見る」が効くようにするにはどうしたらいいでしょうか。
JSを自分で書く知識がないので、ぜひよろしくお願いいたします。
###発生している問題・エラーメッセージ
XMLで読み込まず、ソースを直接ページに書けば、「もっと見る」は動作していますが、
XML読み込みだと、そもそも全部が出た状態になってしまいます。
###該当のソースコード
■XML読み込みのJS
$(function(){ $.ajax({ url:'/photolist.xml', type:'GET', dataType:'xml', timeout:1000, error:function() { alert("ロード失敗"); }, success:function(xml){ $(xml).find("entry").each(function() { data_append( $(this).find('name').text(), $(this).find('photo').text(), $(this).find('caption').text() ); }); } }); function data_append(name, photo, caption) { $("#photoList ul").append('<li>' + '<img src="images/'+ photo +'" alt="'+ name +'" />' + '<p class="cap">'+ caption +'</p>' + '</li>'); } });
■10件ずつ表示JS(上記とは別の外部ファイル)
$(function(){ var n = $("#photoList li").length; $("#photoList li:gt(9)").hide(); var Num = 10; $("#more").click(function(){ Num +=10; $("#photoList li:lt("+Num+")").show(400); if(n <= Num){ $("#more").hide(); } }) });
###試したこと
XML読み込みのJSに10件ずつ表示JSを書くと、
ループして、表示件数分同じ記述が出てしまって、ダメでした。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答1件
あなたの回答
tips
プレビュー