Jquery Ajax按类（或li）加载内容

我正在尝试编写一个ajax滑块。当然，作为一个新手，我发现自己迷失在无益的谷歌搜索的海洋中。应该发生的是，当您单击“下一个”或“上一个”时，我希望加载下一个或上一个列表项，并从DOM中删除原始项。现在，我的代码可以显示开始列表项，但单击“下一步”或“上一步”时什么也没有发生。另外，我现在设置它的方式是，它同时加载包含div中的所有内容，而不是获取特定的列表项，我没有/还没有弄清楚如何做，这正是您进入的地方

重要主页HTML

<div id="navButtons">
    <div style="float:left" id="prevBtn">PREV</div>
    <div style="float:right" id="nextBtn">NEXT</div>
</div>

<div id="contentBox" style="clear:both;margin:0 auto">

</div>

我将jQuery放在contentBox后面

var $curr = $("#start");
    $("#contentBox").load("testContent.aspx #contentBox");
        $("#prevBtn").click(function () {
            $curr = $curr.prev('li');
            $('li').css("display", "none");
            $curr.css("display", "block");
        });
        $('#nextBtn').click(function () {
            $curr = $curr.next('li');
            $('li').css("display", "none");
            $curr.css("display", "block");
        });

---

附加问题：如何让旧内容滑出屏幕，让新内容滑出舞台？

将jQuery更改为：

$("#contentBox").load("testContent.aspx #contentBox", function(){
    var $curr = $("#start");
    $("#prevBtn").click(function () {
        $curr = $curr.prev('li');
        $('li').css("display", "none");
        $curr.css("display", "block");
    });
    $('#nextBtn').click(function () {
        $curr = $curr.next('li');
        $('li').css("display", "none");
        $curr.css("display", "block");
    });
});

---

您正在将$curr变量设置为仅从.load调用返回的元素，以便在设置时它不存在。通过将其放置在.load函数的回调函数中，一旦遇到数据，它就会被分配。

如果所有列表项都在一个页面testContent.aspx上，则逐个请求它们是没有意义的，这意味着服务器必须为每个列表项生成并发送该页面，浏览器必须为每个列表项接收该页面。效率很低。我建议大家看看苹果的cycle插件。它可以处理原始问题和奖金问题，以及下一个和上一个按钮。默认情况下，Malsup不处理ajax，这必须是自定义代码。首先，您将$curr设置为en元素，该元素甚至不存在，因为您尚未加载它var$curr=$start；。顺便说一下，如果在加载数据后将这一行移动到，它将允许上一行/下一行工作。Balls@KevinB你是对的，我担心我处理这一问题的方式可能效率低下。如果每次单击下一个/prev时都加载一个单独的.aspx文件，会怎么样？我试着玩它，但没有用。如果你的aspx文件只返回它需要的一个列表项，而不是整个列表，这将是有效的。

var $curr = $("#start");
    $("#contentBox").load("testContent.aspx #contentBox");
        $("#prevBtn").click(function () {
            $curr = $curr.prev('li');
            $('li').css("display", "none");
            $curr.css("display", "block");
        });
        $('#nextBtn').click(function () {
            $curr = $curr.next('li');
            $('li').css("display", "none");
            $curr.css("display", "block");
        });

$("#contentBox").load("testContent.aspx #contentBox", function(){
    var $curr = $("#start");
    $("#prevBtn").click(function () {
        $curr = $curr.prev('li');
        $('li').css("display", "none");
        $curr.css("display", "block");
    });
    $('#nextBtn').click(function () {
        $curr = $curr.next('li');
        $('li').css("display", "none");
        $curr.css("display", "block");
    });
});