0

我正在尝试编写一个 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>

外部 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 如果有帮助...

额外问题：如何让旧内容向左滑出屏幕，而新内容向左滑到“舞台”上？

4

1 回答 1

0

将您的 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() 函数的回调中，一旦数据出现，它将被分配。

于 2012-05-02T21:29:30.420 回答