按類別（或li）加載Ajax內容

我正在嘗試編寫各種類型的ajax滑塊。當然，對於這個新手來說，我發現自己迷失在無用的谷歌之中。應該發生的事情是，當你點擊下一個（或前一個）時，我想加載下一個（或上一個）列表項並從DOM中刪除原始項。正如我現在的代碼，我可以得到「開始」列表項目顯示，但是當我點擊下一個（或前一個）時沒有任何反應。另外我現在設置的方式是，它同時加載包含div中的所有內容，而不是獲取特定的列表項，我不知道該怎麼做，哪個是你來的地方英寸按類別（或li）加載Ajax內容

重要主頁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的

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

獎金問題（我#contentBox之後放置）：我怎樣才能得到舊的內容不放過屏幕和新的內容滑來滑去左轉入舞臺」？

來源

2012-05-02 ComatoseDuck

如果您的所有列表項目都在一個頁面上（testContent.aspx），則逐個請求它們是沒有意義的，因爲這意味着服務器必須爲每個列表項目和瀏覽器構建併發送該頁面必須爲每個列表項目接收該頁面。非常低效。我建議看看malsup的循環插件。它可以處理您的原始問題和獎勵問題，以及下一個和上一個按鈕。 –

Malsup的默認情況下不處理ajax，那必須是自定義代碼。 –

首先你將$ curr設置爲一個甚至不存在的en元素，因爲你還沒有加載它'var $ curr = $（「＃start」）;'。順便說一句，如果您在加載數據後移動這一行，它將允許prev/next工作。 – j08691

改變你的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-02 21:29:30 j08691

按類別（或li）加載Ajax內容

回答

相關問題