Ajaxでコンテンツをクラス（またはli）でロードする

Question

私はAjaxスライダを作成しようとしています。もちろんこれを初めて知りましたが、私は役に立たないgoogle-ingの海に迷っています。起こるべきことは、次（または前）をクリックすると、次の（または前の）リスト項目にロードし、元の項目を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} 

0 （私は右#contentBox後に置く）

jQueryの

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...

ボーナス質問：どのように私は古いコンテンツが画面と左折スライドに新しいコンテンツをオフに左にスライドに取得することができます舞台"？

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

あなたは、あなたがそれを設定したときに、それが存在しないので、あなたの.LOAD（）呼び出しから返される要素に$のCURR変数を設定しています。 .load（）関数のコールバックに配置することで、データが渡されると割り当てられます。