お世話になります。
記事の一覧で「過去の記事を読む」を押すと特定のファイルをロードし、その結果をDIV内に出力するというプログラムを書きたく下記のようにしました。
(とても見にくい書き方でごめんなさい…)
問題なく動作はするのですが、ロードとさらに過去の記事を読み込んでいく方法をどのように書けば良いか分からず質問をさせて頂きました。
(1)Clickアクションがある度にload('test.php')が行われていると思うのですが、連打をするとloadが何度も行われるのではと心配です。
これを「初回クリック時のみロード、2回目移行はshowとhideで表示・非表示を切り替えるのみ」というようにするにはどうすれば良いでしょうか?
(2)「▽過去の記事を読む」を押すと現状1件の過去の記事がアコーディオン形式で表示されるのですが、これを何回でも遡れる用にしたいと思っています。
(最近スマホサイトなどで見かけるページの下部にある「もっと読む」を押すと、記事ローディング後新しい「もっと読む」のボタンが表示され、過去の記事を同一ページ内でローディングしながら読み進めていけるイメージ)
「▽過去の記事を読む」を押す度にtest.phpに引き渡すパラメータ(例:page)が1→2→3とボタンと連動していければ良いのですが…。
どうぞ宜しくお願い致します。
【HTML】
<a href="javascript:void(0)" id="aaa" class="openbtn">▽過去の記事を読む</a>
<a href="javascript:void(0)" id="bbb" class="openbtn">▽過去の記事を読む</a>
<div id="more_bbb" style="display:none;"></div><a href="javascript:void(0)" id="ccc" class="openbtn">▽過去の記事を読む</a>
<div id="more_ccc" style="display:none;"></div>【JavaScript】
$(function() {
$('.openbtn').click(function() {
var id = $(this).attr('id');
if ($("#more_"+ id).css('display') == 'none') {
$("#"+ id).text("△閉じる");
$("#more_"+ id).load('test.php?id='+ id, function() {
$("#more_"+ id).show();
});
} else {
$("#"+ id).text("▽過去の記事を読む");
}
$("#more_"+ id).slideToggle("slow");
});
});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。