複数のjsonファイルを「もっと見る」ボタンで出力

質問

プログラム初心者です。
Instagramからハッシュタグで画像を抽出し、「もっと見る」ボタンで少しずつHTMLに出力したいです。

↓こちらのブログを参考にさせていただき、Instagramの画像をHTMLに出力するところまで、何とか辿り着きました。
http://blog.hello-world.jp.net/php/2777/

<script>
$(function() {
$.ajax({
url: "json/1.json",
dataType: "json",
error: function(jqXHR, textStatus, errorThrown) {
$("#content").text(textStatus);
},
success: function(data) {
var dataArray = data;
$.each(dataArray, function(i){
$("#content").append("<div><p id='" + dataArray[i].id + "'><a href='" + dataArray[i].link + "' target='_blank'><img src='" + dataArray[i].image_url + "'></a></p></div>");
});
}
});
});
</script>

この状態だと1枚目のjsonしか読み込んでいないので、2枚目以降のファイルも2.json、3.json…「もっと見る」ボタンで取得するようにしたいのですが、知識が足りず。。。

↓こちらのサイトのように、スクロールで表示させるものでも良いのですが。
http://nekostagram.com/

詳しい方、ご協力いただけるとありがたいです。
どうぞよろしくお願いいたします。m(__)m

回答No.1

sanzero · ベストアンサー

こんな感じでしょうかね。jsonの仕様がわかりませんのであってるかはわかりません。
もっと見るボタンをクリックするごとにjson/1.jsonの1を+1するようにして、クリックするごとにjson/(n).jsonを取ってくるようにしています。

クリックした時の挙動を制御する書き方はわかりますよね。
$("もっとみるボタン").click(function(){}); の「もっとみるボタン」は適宜変更してください。

<script>
$(function() {
// jsonの番号
var json_num = 1;
$("もっとみるボタン").click(function(){
$.ajax({
url: "json/" + json_num + ".json",
dataType: "json",
error: function(jqXHR, textStatus, errorThrown) {
$("#content").text(textStatus);
},
success: function(data) {
var dataArray = data;
$.each(dataArray, function(i){
$("#content").append("<div><p id='" + dataArray[i].id + "'><a href='" + dataArray[i].link + "' target='_blank'><img src='" + dataArray[i].image_url + "'></a></p></div>");
});
}
// 次のjson番号
json_num = json_num + 1;
});
});
});
</script>

お礼

お返事が遅くなり申し訳ございません。
教えていただいたソースを元に実装出来そうな気がします。
分かりやすい回答ありがとうございます！