Question

我试图写一个类似的ajax滑块。当然是对此我不知所措，我发现自己迷失在无益的谷歌之中。应该发生的是，当您单击下一个（或上一个）时，我想加载下一个（或上一个）列表项并从DOM中删除原始项。正如我的代码现在一样，我可以得到＃34;开始＆＃34;列出要显示的项目，但是当我单击下一个（或上一个）时没有任何反应。我现在设置它的方式是它同时加载包含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>

外部HTML（通过ajax加载）

<div id="contentBox" style="clear:both;margin:0 auto">
     <ul>
        <li class="loadContent">CONTENT 1</li>
        <li class="loadContent">CONTENT 2</li>
        <li class="loadContent">CONTENT 3</li>        
        <li id="start" class="loadContent">CONTENT 4</li>        
        <li class="loadContent">CONTENT 5</li>        
        <li class="loadContent">CONTENT 6</li>        
        <li class="loadContent">CONTENT 7</li>        
        <li class="loadContent">CONTENT 8</li>
        <li class="loadContent">CONTENT 9</li>  
    </ul>
</div>

CSS

#prevBtn, #nextBtn{cursor:pointer}
.loadContent { width:100px; height:40px; ;
        float:left; border:2px blue solid; 
        padding:2px;display:none }
  ul, li{list-style-type:none}
  #start{display:block}

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

JSFiddle if it's helpful...

奖金问题：如何让旧内容从屏幕上滑下并将新内容向左滑动到＆＃34;阶段＆＃34;？

Answer 1

将您的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（）函数的回调函数中，一旦数据遇到就会分配它。

Ajax按类（或li）加载内容

1 个答案: