Question

有人可以帮助我吗？

我目前正在开发一个动态网站。我有2个导航点，右侧有一个视频窗口。通过单击一个导航点，相应的视频应出现在视频窗口中。问题是：我的导航列表将动态创建，视频外观也是如此（在这种情况下，网址视频将从Youtube中嵌入）。这是我的PHP代码，其中将动态创建导航点列表：

function reborn_videos($attribute){
    ob_start();
    $urls = $attribute['filme'];
    $urls = explode(',', $urls);
?>  
<div id="mobil_content">

    <?php for($i=1; $i<= count($urls); $i++) { 

        $movie_title = $attribute['title'.$i];
    ?>      
        <div class="box">   
            <div class="box_title_video"><a class="expand"><?php echo $movie_title; ?>     </a></div>
                <?php foreach ($urls as $url) { ?>
                <div class="box_body_iframe">
                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/<?php echo trim($url); ?>" frameborder="0" allowfullscreen></iframe>   
                </div>  
                <?php   } ?>
</div>
<?php   } ?>

这是我现在改变和看起来的东西：

function reborn_videos($attribute){
    ob_start();
    $urls = $attribute['filme'];
    $urls = explode(',', $urls);
?>  
    <div id="mobil_content">

    <?php for($i=1; $i<= count($urls); $i++) { 
            $movie_title = $attribute['title'.$i];
    ?>      
    <div class="box">   
            <div class="box_title_video"><a class="expand"><?php echo $movie_title; ?></a></div>

                <div class="box_body_iframe">

                    <iframe width="100%" height="315" src="https://www.youtube.com/embed/<?php echo trim($urls[$i]); ?>" frameborder="0" allowfullscreen></iframe> 


                </div>  


    </div>
    <?php   } ?>

这里是我想用来显示和隐藏我的视频的JQuery：

var $alleVideos = $(".box_body_iframe");

function showVideos() {
  $alleVideos.each(function(){
    if ( $(this).hasClass('active') ) {
      $(this).show();
    } else{
      $(this).hide();
    }
  });
}
$alleVideos.hide();

$(".box_title_video").click(function(){
  $alleVideos.removeClass('active');
  $(this).next().addClass('active');
  showVideos();
});

在JQuery代码中我没有任何变化这是浏览器输出html代码的方式：

<div id="mobil_content">
<div class="box">
<div class="box_title_video">
<a class="expand">reborn</a>
</div>
<div class="box_body_iframe" style="display: none;">
<iframe height="315" frameborder="0" width="100%" allowfullscreen="" src="https://www.youtube.com/embed/7PnRkyu0HTs">
</div>
</div>
<div class="box">
<div class="box_title_video">
<a class="expand">trailer</a>
</div>
<div class="box_body_iframe active" style="display: block;">
<iframe height="315" frameborder="0" width="100%" allowfullscreen="" src="https://www.youtube.com/embed/">
</div>
</div>
</div>

问题是：JQuery动画只在视频窗口中显示一个并且始终是相同的视频。： - （

Answer 1

问题似乎是你的循环中有一个循环，并且两个循环遍历你的所有网址：

for($i=1; $i<= count($urls); $i++)
    ...
    foreach ($urls as $url)

因此，在外部循环的每个条目中，您将生成所有视频的列表。并且您每次使用$(this).next().addClass('active');激活该列表中的第一个，因此您将始终显示相同的第一个视频。

您可以通过仅使用当前项替换内部循环来解决您的问题：$urls[$i]：

<div class="box_title_video"><a class="expand"><?php echo $movie_title; ?>     </a></div>
    <div class="box_body_iframe">
        <iframe width="100%" height="315" 
            src="https://www.youtube.com/embed/<?php echo trim($urls[$i]); ?>"
            frameborder="0" allowfullscreen></iframe>   
    </div>  
</div>

编辑：我刚注意到你的循环运行形式为1而数组是零索引的，所以你需要：

... src="https://www.youtube.com/embed/<?php echo trim($urls[$i - 1]); ?>" ...
                                                             ^^^^^^^ here

现在你正确显示了两个街区，但正如你在第二个视频中看到的那样，没有网址。

用于动态创建元素的JQuery和PHP

1 个答案: