使用 JavaScript 显示和隐藏 PHP 回显的 XML 数据 - Using JavaScript to show and hide PHP echoed XML data

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

所以我认为最好的办法是将所有五十个项目回显到标记为 0 到 49 的div 中的页面......然后使用 JavaScript 隐藏除 0 和 1 之外的所有div，直到你单击下一个按钮，它切换到隐藏除 2 和 3 之外的所有内容......依此类推......

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

您可以使用以下 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');
      }
    });

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

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

我可能会选择更多的东西，解析XML，将所有数据存储为JSON，然后使用HTML提供的jQuery动态更新DOM，并提供像Mustache.js这样的模板框架。

/* 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 元素的要求。您可能有选择您拥有的实现的原因，但这不是如果我遇到此问题我会采取的实现！

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

等等...