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

我假设正在加载 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;
        }
    });
});

Answer 1

在我们讨论了 cmets 之后，我想我明白你想要什么了。

您的示例 URL index.php?pigsgallery=1&pigspage=1 看起来不错。我认为它只会返回 pigsgallery X 的内容，在 Y 页上。完美。

因此，您的问题似乎是将 URL 返回的内容插入到正确的图库div 中——其中包含单击的分页链接。你快到了。正如我在其中一个 cmets 上建议的那样，$(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")。