0

比較的新しいjQueryユーザー（パスで使用しましたが、今は本当に理解しようとしています）。

ajax を使用して独自の jQuery ページネーションを作成しようとしていますが、これまでのところ私のコードは次のようになっています。

$(document).ready(function(){
    $('.pigs ul.pigspagination li a').live('click', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        if(url.match('^http')){
            return true;
        } else {
            var element = $(this).closest(".pigs");
            $(element).append('<div id="loading"><img alt="Loading..." src="loading.gif" /></div>');
            $('#loading').fadeIn('normal');
            $(element).load(url + ' ' + element);
            return false;
        }
    });
});

コードは基本的に、「.pigs ul.pigspagination li a」をクリックすると、指定された URL から「.pigs」である親要素をロードし、URL から同じフラグメントをロードします。ただし、これは機能していないようです:

$(element).load(url + ' ' + element);

URL を読み込んでからスペースを追加してから、var element = $(this).closest(".pigs"); から参照される要素について言っていると仮定します。

なぜ私が $(element).load(url + '.pigs'); を入れられないのか疑問に思っているなら

これは、.pigs を複数回参照し、それが私が書いた php ギャラリー スクリプトであるため、自動的に参照されるためです。

html はおおよそ次のようになります。

<div class="pigs">
    <ul class="pigs-gallery">
        <li><a href="the link" target="_blank"></a></li>
        ...
    </ul>
    <ul class="pigspagination">
        <li><a href="pagination link">&lt; Prev</a></li>
        ...
        <li><a href="pagination link">Next &gt;</a></li>
    </ul>
</div>

ただし、さらに多くのギャラリーが読み込まれます。

何か案は？

-------------- bfavaretto の編集 --------------- これを試してみました

var frag = $(this).closest(".pigs").attr('id');
$(element).load(url + ' #' + frag);

その吸引だけをロードしますが、すべてのコードを削除します。私の推測では、フラグがひどく渡されています。.attr('id'); 「#」ではなく、それ自体でIDを取得しますか？

誰かが興味を持っている場合のフィナーレコード：

$(document).ready(function(){
    $('.pigs ul.pigspagination li a').live('click', function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        if(url.match('^http')){
            return true;
        } else {
            var element = $(this).closest(".pigs");
            $(element).append('<div id="loading"><img alt="Loading..." src="loading.gif" /></div>');
            $('#loading').fadeIn('normal');
            var frag = $(this).closest(".pigs").attr('id');
            $(element).load(url + ' #' + frag);
            return false;
        }
    });
});
4

1 に答える 1

0

コメントで話し合った後、私はあなたが何を望んでいるのか理解していると思います。

サンプルURLindex.php?pigsgallery=1&pigspage=1はよさそうです。YページのpigsgalleryXのコンテンツのみが返されると思います。完璧です。

divしたがって、問題は、URLによって返されたコンテンツを右側のギャラリー（クリックされたページネーションリンクを含むギャラリー）に挿入することであるようです。もうすぐです。コメントの1つで提案したように、$(element).load(url)言葉で表現する必要があります。$(element)これは、「URLをロードし、の内容を応答に置き換える」ことを意味します。

HTMLは次のようになります（両方のギャラリーが現在2ページにあります）。

<div class="pigs" id="pigs1">
    <ul class="pigs-gallery">
        <li><a href="the link" target="_blank"></a></li>
        ...
    </ul>
    <ul class="pigspagination">
        <li><a href="index.php?pigsgallery=1&pigspage=1">&lt; Prev</a></li>
        ...
        <li><a href="index.php?pigsgallery=1&pigspage=3">Next &gt;</a></li>
    </ul>
</div>

<div class="pigs" id="pigs2">
    <ul class="pigs-gallery">
        <li><a href="the link" target="_blank"></a></li>
        ...
    </ul>
    <ul class="pigspagination">
        <li><a href="index.php?pigsgallery=2&pigspage=1">&lt; Prev</a></li>
        ...
        <li><a href="index.php?pigsgallery=2&pigspage=3">Next &gt;</a></li>
    </ul>
</div>

これがHTMLの外観と異なる場合は、PHPで何を行う必要があるのか​​、jQueryが必要なのかを混乱させる可能性があります。PHPはリクエストを処理し、divの1つで置き換える必要のあるコンテンツのみを返す必要があります。次に、jQueryを使用して、そのコンテンツをページの適切な要素内に実際に挿入する必要があります（これはすでに。で使用されていますvar element = $(this).closest(".pigs")。

于 2011-07-28T18:01:33.490 に答える