Question

我正在使用PHP来回显XML文件中的50个视频ID。我使用视频ID将50个YouTube视频嵌入到我的网站中。这很好但我需要一次隔离两个视频。我不希望用户一次看到所有五十个视频。我希望他们看到两个，然后点击下一个，看另外两个，然后点击返回等等。

这是我到目前为止所拥有的：

$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 />";

}

所以我认为最好的办法是将所有50个项目回显到标记为0到49的div中的页面...然后使用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

老实说，我认为将50个视频嵌入页面中并不是很好 - 无论是否可见;仅仅因为它们将被浏览器处理，尽管不可见。（如果我错了，请随意纠正我，但浏览器将会看到并处理整个DOM - 并将样式应用于“隐藏”位。）

如果你想在DOM中拥有50个元素，尽管它可能对浏览器和带宽产生影响，Gustavo Straube已经给出了如何做到这一点的非常好的答案。

我可能会更多地解析XML，将所有数据存储为JSON，然后使用带有模板框架（如Mustache.js）的HTML中的jQuery动态更新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元素。可能有一个原因你选择了你所拥有的实现，但如果我遇到这个问题，那就不是我要采取的实现了！

Answer 3

对于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;
    }
});

等等......

使用JavaScript显示和隐藏PHP回显的XML数据

3 个答案: