1

下部に「さらに読み込む」ボタンがある大きなページがあります。「さらに読み込む」をクリックするたびに、AJAX を介してより多くのコンテンツが読み込まれます。そのコンテンツの一部は、Facebook の「いいね」ボタンとコメント ボタンです。

<div class="fb-like" data-href="http://mysite.com/a<?=$x ?>" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false"></div>
<div class="fb-comments" data-href="http://mysite.com/a<?=$x ?>" data-width="435"></div>

追加のコンテンツを読み込んだ後、Facebook にページ全体を再解析するように依頼できますFB.XFBML.parse();(これにより、これらの div が実際のいいね! ボタンとコメント フォームに変わります)。これは完全に機能しますが、Facebook は新しいコンテンツだけでなく、既にページにあったコンテンツを再解析するため、すぐに遅くなります。ユーザーが「さらに読み込む」をクリックするたびに、ページ全体が解析されるため、FB 機能が実行できることはますます多くなります。

ここで朗報があります。FB parse のドキュメントには、Facebook に要素を 1 つだけ解析するように依頼できると書かれています。そこで私は、ユーザーが「さらに読み込む」をクリックしたときに、その新しい HTML を一意の でラップし、divjQuery を使用してdivを調べ、すべての Facebook タグを見つけて、Facebook にそれらだけを解析するように依頼することにしました。いい考えですね。しかし、私はそれを機能させることはできません。:-)

したがって、このトリックを実行するはずのコードは次のとおりです。

// "c" is my container div (a jQuery object, i.e. c = $('#container'); ) 
// "load more" button
$('#loadmore').click(function() {
    $.ajax({
        url: "/loadmore.php",
        success: function(html) {
            if(html) {
                // wrap new HTML in special div
                newDivName = "d"+String(new Date().valueOf());
                var $newHtml = $("<div id='"+newDivName+"'>"+html+"</div>");

                // append it to existing content, and tell Isotope
                c.append($newHtml);
                if(c.hasClass('isotope-loaded')) { c.isotope( 'appended', $newHtml ); }

                // walk through new HTML and get all Facebook "like" buttons and parse them
                $('#'+newDivName+' .fb-like').each(function() {
                    console.log('xfbml parsing .'+this.attr('class')+' and data-href '+this.attr('data-href'));
                    FB.XFBML.parse(this);
                });
            }
        }
    });

});

しかし、私は得ています：（Uncaught TypeError: Object #<HTMLDivElement> has no method 'attr'これは、私の each() が正しく機能していないことを示しています）...なぜですか？

更新:この問題を解決するための回答が以下に見つかりましたが、まだ機能していません。新しい質問を参照してください:個々の要素の FB.XFBML.parse() は何もしません

4

3 に答える 3

2

$(this)の代わりに使用しthisます。

注:メソッド$(this)から返された項目.each()を jQuery でラップされたセット オブジェクトに再度作成し、jQuery の処理を​​再度行います。それ以外の場合thisは生の値です。

于 2013-08-19T00:51:15.433 に答える
1

デモ

.each()クラスを持つすべての要素をループするfb-like

$(this)現在の要素を参照します。

$(this).data('href'))の値を取得しますdata-href

$(this).data('href'))の代わりに利用する$(this).attr('data-href')

data attributeこのよう に使用することはお勧めであり、良い習慣です$(this).data('href'))

$('.fb-like').each(function () {
    console.log('xfbml parsing .' + $(this).attr('class') + ' and data-href ' + $(this).data('href'));
});
于 2013-08-19T02:38:01.497 に答える
1 
console.log('xfbml parsing .'+$(this).attr('class')+' and data-href '+$(this).attr('data-href'));

生の this オブジェクトを facebook に渡す必要があります。attr は jQuery メソッドです。

于 2013-08-19T00:56:44.503 に答える