使用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元素的需求。可能有一个原因是你已经选择了你的实现，但如果我遇到了这个问题，这不是我要实现的实现！