從另一頁上的div加載內容

嘗試將內容加載到div #load-here，在點擊另一個頁面上的特定div .date-outer。從另一頁上的div加載內容

HTML

外部網站的

<button class='btn'/> 
<div id="load-here"></div> <!-- Load Here --> 

</body>

HTML結構：

<body> 
<div class="blog-posts hfeed"> 

<div class="date-outer"> 
Contecnt 1</div> 

<div class="date-outer"> 
Contecnt 2</div> 

<div class="date-outer"> 
Contecnt 3</div> 

</div> 
</body>

手段，當點擊按鈕.btn數據將從給定鏈路負載，當再次點擊數據從第二個div加載。實施例下面：

首先點擊

<body>  
<button class='btn'/> 
<div id="load-here"> 
<div class="date-outer"> <!--Loaded Data--> 
    Contecnt 1</div> 
</div> 
<body>

在第二次點擊

<body>  
<button class='btn'/> 
<div id="load-here"> 
<div class="date-outer"> <!--Loaded Data--> 
    Contecnt 1</div> 

<div class="date-outer"> <!--Loaded Data--> 
    Contecnt 2</div> 

</div> 
<body>

在第三次點擊

<body>  
<button class='btn'/> 
<div id="load-here"> 
<div class="date-outer"> <!--Loaded Data--> 
    Contecnt 1</div> 
<div class="date-outer"> <!--Loaded Data--> 
    Contecnt 2</div> 
<div class="date-outer"> <!--Loaded Data--> 
    Contecnt 3</div> 
</div> 
<body>

手段想要加載數據形式外部網站/點擊鏈接，如何通過Jquery/ajax做到這一點？

來源

2015-09-20 Aariba

將給定按鈕的單擊事件掛鉤到某個函數，如果尚未完成，則從其他站點加載內容。一旦獲得了內容，您可以簡單地查詢該網頁的.data-outer，並將您想要定位的下一個網頁的內容複製到真實網頁。

$(function() { 
    var page = null; 
    var counter = 0; 

    function getNext() { 
     // Grab the next element from the array of date-outer divs and copy it to the .content div 
     if (counter >= page.length) 
      return; 
     var elm = $(page[counter]).clone(); 
     elm.find('script').remove(); // Remove script tags in the div 
     elm.appendTo('#load-here'); 
     counter++; 
    } 

    $('.btn').click(function(e) { 
     if (page === null) { 
      page = false; // Prevents the request from being made twice 
      $.get('http://....com/../', function(data) { 
       page = $(data).find('.date-outer'); 
       getNext(); 
      }); 
     } else if (page !== false) { 
      getNext(); 
     } 
    }); 
});

例小提琴：http://jsfiddle.net/hpu5f4ur/（注：需要 http和Access-Control-Allow-Origin: *由於示例站點不允許HTTPS和的jsfiddle默認情況下不設置此標頭）。

來源

2015-09-20 17:43:30 Tgys

嗨，我的問題已編輯，請將'.content'改爲'＃load-here'。請刷新此頁面並查看我的問題的更改。 – Aariba

該編輯已經應用在我的答案中。 – Tgys

嗨，謝謝，但不工作，請看這裏的例子：http://test-html-site.blogspot.com/＃我做錯了什麼？您可以通過chrome上的Inspect-element查看HTml源代碼。 – Aariba

從另一頁上的div加載內容

回答

相關問題