サポート » 使い方全般 » Autopagerでページング後、他のスクリプトがきかない

  • 解決済 yuzucco

    (@yuzucco)


    最新記事の一覧を出すのに、記事ごとのBOX(div.listBox)全体をクリックできるようなスクリプト(linkBox)を使い、かつ、autopagerにてページ遷移なしに一覧の続きが見れるようにしました。
    が、ページング後に表示される記事一覧では、BOXがクリックできなくなりました。
    autopagerのロード時に、もう一度linkBoxを動くようにすればよいかと思い、いろいろ調べて試したのですが解決できません。
    同じような事象を解決した方の記事も見つけたのですが、応用ができませんでした・・・

    また、情報が足りなければ教えてください。
    よろしくお願いいたします。

    function.js:

    $(function linkBox() {
    var linkboxes = $(“div.listBox”);
    for (var i=0; i<linkboxes.length; i++){
    var readmores = $(“span.moreCol”);
    for (var j=0; j<readmores.length; j++){
    $(“div.listBox”).click(function() {
    var anchorTags = this.getElementsByTagName(“a”);
    window.location = anchorTags[0].href;
    });
    }
    }
    $(“span.moreCol”).addClass(“none”);
    });

    $(function () {
    $.autopager({
    autoLoad: false,
    link: ‘.scrollBox a’,
    content: ‘.listArea’,
    load: function(current, next) {
    $(this).effectChain({ target: “div”});
    }
    });
    $(‘.scrollBox a’).click(function() {
    $.autopager(‘load’);
    return false;
    });
    });

    home.php:
    <section class=”recentArea”>
    <div class=”listArea”>

    <?php $paged = get_query_var(‘paged’);
    query_posts(‘posts_per_page=6&paged=’. $paged); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div class=”listBox”><div>
    <h3 class=”listBoxTitle”><?php the_title(); ?></h3>
    <span class=”dateCol”>[ <?php the_time(‘Y/n/j’); ?> ]</span>
    <span class=”moreCol”>“>read more</span>
    </div></div><!–/listBox–>

    <?php endwhile; endif; wp_reset_query(); ?>
    </div><!–/listArea–>
    </section><!–/recentArea–>

    <div class=”scrollBox”>
    <?php next_posts_link(‘もっと見る’); ?>
    </div><!–/scrollBox–>

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • モデレーター gatespace

    (@gatespace)

    ※【重要】 お読みくださいには投稿しないでください。
    使い方全般に移動します。
    あとコード部分は「code」で囲むようにしてください。

    久保 綾

    (@ayahime)

    yuzucco 様

    今一つ理解出来ないのですけど、
    1.「最新記事一覧」
    といわれていますけど、実体としては、最新記事から順番に「タイトルと本文抜粋した内容」を出力する、

    これが一つのボックスと考えるでいいのでしょうか?
    そして表示する記事数は一つずつ、でいいのでしょうか?

    2.これを固定ページで行うのですか?
    それとも表示するページは何かお考えなのですか?

    (参照したページから推測しました)
    jQuery.autopager
    jQuery Link Box プラグイン作りました

    (o*。_。)oペコッ

    モデレーター Takuro Hishikawa

    (@hissy)

    Ajax読み込み完了後のコールバック関数で動かしたいスクリプトを再起動すれば良い。

    トピック投稿者 yuzucco

    (@yuzucco)

    gatespace様、
    大変失礼しました。以後気をつけます。

    トピック投稿者 yuzucco

    (@yuzucco)

    久保 綾 様
    ご返信ありがとうございます。

    >1
    はい。そうです。
    表示する記事数は6件ずつです(posts_per_page=6)。
    >2
    表示はindexとカテゴリーの一覧です。

    教えていただいたようなページをいろいろ調べ試してみたのですが、
    どれも動かず質問させていただきました。

    ありがとうございました。。。

    トピック投稿者 yuzucco

    (@yuzucco)

    hissy 様
    ご返信ありがとうございます。
    はい。そのような記事を調べいろいろな記述を試してみたのですが、
    どれも動かず質問させていただきました。

    ありがとうございました。

    モデレーター Takuro Hishikawa

    (@hissy)

    両スクリプトの仕様を知らないですけど、loadでコールバック関数があるみたいだから、普通にそこで起動すればいいのでは?

    $.autopager({
    	autoLoad: false,
    	link: '.scrollBox a',
    	content: '.listArea',
    	load: function(current, next) {
    		$(this).effectChain({ target: "div"});
    		linkBox();
    	}
    });

    何故か function linkbox を $( ) でラップしてるから、それは止めないと動かないと思いますが…なぜラップしてるのかな、他の何かと干渉したんですか?

    モデレーター Takuro Hishikawa

    (@hissy)

    あと、もしHTML5で書いていれば、a 要素はトランスペアレントなので div の代わりに使えますよ。めんどくさいJS不要

    トピック投稿者 yuzucco

    (@yuzucco)

    hissy様
    たびたびのご返信ありがとうございます。

    >loadでコールバック関数があるみたいだから、普通にそこで起動すればいいのでは?
    >$(this).effectChain({ target: “div”});
    >linkBox();
    こちらはまずやってみたのですが動きませんでした。

    >何故か function linkbox を $( ) でラップしてるから、それは止めないと動かないと思いますが…
    なるほど。こちら側に問題があるかもしれないですね。

    >なぜラップしてるのかな、他の何かと干渉したんですか?
    色々な方の記事を見ながら書いたので囲んでいることに意味はありません。
    すみません・・・
    勉強しつつと思っているのですが、全然理解できてないですね(汗
    ラップしているのを止める(?)というのを勉強してみます。

    >もしHTML5で書いていれば、a 要素はトランスペアレントなので div の代わりに使えますよ。
    Hタグは囲めないかと思いdivにしました。
    最後はlinkbox の組み方を再考してみます。

    勉強になります。ありがとうございます!

    モデレーター Takuro Hishikawa

    (@hissy)

    $(function linkBox() {
    	var linkboxes = $("div.listBox");
    	for (var i=0; i < linkboxes.length; i++){
    		var readmores = $("span.moreCol");
    		for (var j=0; j < readmores.length; j++){
    			$("div.listBox").click(function() {
    				var anchorTags = this.getElementsByTagName("a");
    				window.location = anchorTags[0].href;
    			});
    		}
    	}
    	$("span.moreCol").addClass("none");
    });

    function linkBox() {
    	var linkboxes = $("div.listBox");
    	for (var i=0; i < linkboxes.length; i++){
    		var readmores = $("span.moreCol");
    		for (var j=0; j < readmores.length; j++){
    			$("div.listBox").click(function() {
    				var anchorTags = this.getElementsByTagName("a");
    				window.location = anchorTags[0].href;
    			});
    		}
    	}
    	$("span.moreCol").addClass("none");
    }
    
    $(function(){ linkBox() });

    > Hタグは囲めないかと思いdivにしました。
    HTML5ならaタグでhタグも囲めます。

    トピック投稿者 yuzucco

    (@yuzucco)

    hissy様、
    ご返信ありがとうございます。

    教えていただいた記述で動きました。
    感激です!
    何度もお手数をおかけいたしました。

    >HTML5ならaタグでhタグも囲めます。
    hタグもとは・・・。これはずいぶん楽になります。

    大変勉強になりました。
    ありがとうございました。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「Autopagerでページング後、他のスクリプトがきかない」には新たに返信することはできません。