使用JavaScript顯示和隱藏PHP回顯的XML數據

Question

我使用PHP從XML文件回顯了50個視頻ID。我使用視頻ID將50個YouTube視頻嵌入我的網站。這工作正常，但我需要一次隔離兩個視頻。我不希望用戶一次看到所有50個視頻。我希望他們能看到兩個，然後單擊下一步，看到另外兩個的話，說不定單擊後退，等等，等等

這是我到目前爲止有：

$url = "http://www.theURLofmyXML.blah"; 
$xml = simplexml_load_file($url); 
$i = 0; 

while ($i < 49) { 

$title = (string) $xml->query->results->item[$i]->title; 
$videoid = (string) $xml->query->results->item[$i]->id; 
$explanation = (string) $xml->query->results->item[$i]->explanation; 

$i = $i + 1; 

echo $title."<br />"; 
echo '<iframe width="400" height="225" src="http://www.youtube.com/embed/'.$videoid.'?rel=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe><br/>'; 
echo $explanation."<br /><br />"; 

} 

所以我覺得最好的辦法將所有五十個項目回顯到div標籤爲0到49的頁面中......然後使用JavaScript隱藏除0和1之外的所有div，直到您單擊下一個按鈕並切換爲隱藏除2和3之外的所有內容爲止......等等...

但我不知道如何在JavaScript/jQuery中做到這一點。我認爲使用.show（）和.hide（）會工作，但我不確定語法。

Answer 1

您可以使用以下HTML結構：

<a href="#" class="prev-video-row">Previous videos</a> 
    <div class="video-row active"> 
     <!-- First couple videos --> 
    </div> 
    <!-- Loop through all videos, writing the other rows --> 
    <div class="video-row"> 
     <!-- Last couple videos --> 
    </div> 
    <a href="#" class="next-video-row">Next videos</a> 

注意：僅在第一個視頻行中使用active類，以在頁面加載時默認顯示它們。

使用CSS，隱藏所有.video-row（使用：display:none;）並僅顯示.video-row.active（使用：display:block;）。

最後，使用下面的JavaScript（jQuery的需要）到視頻行之間導航：

jQuery('.prev-video-row').click(function (event) 
    { 
     event.preventDefault(); 
     var prev = jQuery('.video-row.active').prev(); 
     if (prev.length) 
     { 
     jQuery('.video-row').removeClass('active'); 
     prev.addClass('active'); 
     } 
    }); 
    jQuery('.next-video-row').click(function (event) 
    { 
     event.preventDefault(); 
     var next = jQuery('.video-row.active').next(); 
     if (next.length) 
     { 
     jQuery('.video-row').removeClass('active'); 
     next.addClass('active'); 
     } 
    }); 

Answer 2

對於HTML這樣的：

<div id="section0"></div> 

你的jQuery會是什麼樣子：

$(document).ready(function() { 
    $('#section0').show(); 
    $('#section1').show(); 

    $('#nextButton').click(function(e){   
     e.preventDefault(); 
     $('#section0').hide(); 
     $('#section1').hide(); 
     $('#section2').show(); 
     $('#section3').show(); 
     return false; 
    } 
}); 

等等......

Answer 3

老實說，我不認爲這是偉大的，有50個視頻嵌入在網頁 - 無論知名度還是不;只是因爲它們將被瀏覽器處理，儘管不可見。 （如果我錯了，請隨時糾正我，但瀏覽器將會看到並處理整個DOM，並將樣式應用於「隱藏」位）。

Gustavo Straube給出了一個真正的如果你想在DOM中有50個元素，儘管它可能對瀏覽器和帶寬有影響，但是如何做到這一點還是很好的答案。

我可能會沿着解析XML的方向前進，將所有數據存儲爲JSON，然後用HTML中的jQuery從HTML提供的模板框架（如Mustache.js）動態更新DOM。

/* Generate JSON */ 
$url = "http://www.theURLofmyXML.blah"; 
$xml = simplexml_load_file($url); 
$i = 0; 
$json = array(); 

while ($i < 49) { 

$arr['title'] = (string) $xml->query->results->item[$i]->title; 
$arr['videoid'] = (string) $xml->query->results->item[$i]->id; 
$arr['explanation'] = (string) $xml->query->results->item[$i]->explanation; 

$json[] = $arr; 
} 

echo json_encode($json); 

然後，在你的標記有類似下面的，只是初始化你的第一個X視頻 - 在這個例子中10 ..

$(document).ready(function(){ 
    var template = '{{$title}}<br /><iframe width="400" height="225"' 
     + 'src="http://www.youtube.com/embed/{{$videoid}}?rel=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe><br/>' 
     + '{{explanation}}<br /><br />'; 
    var html = ''; 
    var i=0; 

    for(; i<10; i++){ 
     var item = json[i]; 
     html += Mustache.to_html(template, item); 
    } 
    $('#videos').html(html); //where #videos is a div to contain your videos 

接下來有一個錨（在這個例子中#next ）獲得下10個視頻..

$('#next').click(function(){ 
     /* template, i and json are still in scope! */ 
     var j = i+10; 
     for(; i<j; i++){ 
      var item = json[i]; 
      html += Mustache.to_html(template, item); 
     } 
     $('#videos').html(html); //where #videos is a div to contain your videos 
    }); 

這樣做的好處是它也很容易做到先前的錨...

$('#prev').click(function(){ 
     /* template, i and json are still in scope! */ 
     var j = i -10; 
     i -= 20; //10 for the current page, 10 for the start of the previous page 
     for(; i<j; i++){ //rebuild div content of previous page 
      var item = json[i]; 
      html += Mustache.to_html(template, item); 
     } 
     $('#videos').html(html); 
    }); 

只是再次重申，這是一個替代解決方案 - 我認爲它作爲使用JSON比XML更輕量且更靈活，同時也消除了需要一次不使用50個DOM元素的需求。可能有一個原因是你已經選擇了你的實現，但如果我遇到了這個問題，這不是我要實現的實現！