2

我正在使用 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 />";

}

所以我认为最好的办法是将所有 50 个项目回显到标有 0 到 49 的 div 内的页面......然后使用 JavaScript 隐藏除 0 和 1 之外的所有 div，直到您单击下一步按钮并切换到隐藏除 2 之外的所有内容和 3……等等……

但我不确定如何在 JavaScript/jQuery 中做到这一点。我认为使用 .show() 和 .hide() 会起作用，但我不确定语法。

4

3 回答 3

2

您可以使用以下 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');
      }
    });
于 2012-07-02T15:48:48.130 回答
2

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

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

我可能会更倾向于解析 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
    });

这样做的好处是也很容易做一个以前的anchor...

    $('#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 元素的要求一度。您选择您拥有的实现可能是有原因的，但如果我遇到这个问题，这不是我会采用的实现！

于 2012-07-02T16:11:27.257 回答
1

对于像这样的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;
    }
});

等等...

于 2012-07-02T15:43:53.187 回答