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 に答える