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 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'）;会得到自己的身份，而不是'＃'吧？

如果有人有兴趣，可以使用最终代码：

$(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看起来不错。我假设它只会返回第Y页上的piggallery X的内容。完美。

所以你的问题似乎是将URL返回的内容插入到右侧的库div中 - 包含点击的分页链接。你快到了。正如我在其中一条评论中所建议的，$(element).load(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")。

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

1 个答案: