jQuery Ajax 加载 url 的片段，该片段由变量定义

Question

相对较新的 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);

我假设正在加载网址，然后添加一个空格，然后说明引用的元素 var element = $(this).closest(".pigs");

如果你想知道为什么我不能放 $(element).load(url + ' .pigs');

这是因为我多次引用 .pigs ，并且它是自动的，因为它是我编写的 php gallery 脚本。

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

Answer 1

经过我们对评论的讨论，我想我明白你想要什么。

您的示例网址 index.php?pigsgallery=1&pigspage=1 看起来不错。我假设它只会返回 Pigsgallery X 的内容，在第 Y 页上。完美。

因此，您的问题似乎是将 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">< Prev</a></li>
        ...
        <li><a href="index.php?pigsgallery=1&pigspage=3">Next ></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">< Prev</a></li>
        ...
        <li><a href="index.php?pigsgallery=2&pigspage=3">Next ></a></li>
    </ul>
</div>

如果您的 HTML 不是这样的，您可能会混淆什么应该在 PHP 中完成，什么需要 jQuery。 PHP 应该处理该请求并仅返回您需要在其中一个 div 上替换的内容。然后应该使用 jQuery 将该内容实际插入到页面的右侧元素内（您已经使用 var element = $(this).closest(".pigs") 获得了该内容）。