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);

它只加载了那个吸力，但删除了所有代码，我的猜测是 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 页上的 pigsgallery X 的内容。完美。

因此，您的问题似乎是将 URL 返回的内容插入到正确的图库div中——其中包含单击的分页链接。你快到了。正如我在其中一条评论中所建议的那样，$(element).load(url)应该用词。它的意思是“加载 url，并用$(element)响应替换内容”。

您的 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 上替换的内容。然后应该使用 jQuery 将该内容实际插入到页面中，在正确的元素内（您已经使用var element = $(this).closest(".pigs").

于 2011-07-28T18:01:33.490 回答