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

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

现在您正确显示了两个 block ，但正如您在第二个视频中看到的那样，没有 url。