Javascript 当在弹出窗口中显示视频时,while循环仅获取最后一行

Javascript 当在弹出窗口中显示视频时,while循环仅获取最后一行,javascript,php,mysql,Javascript,Php,Mysql,我是一名编程新手,在为我的慈善网站显示不同家庭案例的代码中,我遇到了一些问题。如果有人能帮助我,我将不胜感激。这是我的密码 <div id="Families"><div id="arrow"></div> <?php $server = "localhost"; $user = "root"; $pass = ""; $dbname = "help_someone"; //Creating connection for mysqli

我是一名编程新手,在为我的慈善网站显示不同家庭案例的代码中,我遇到了一些问题。如果有人能帮助我,我将不胜感激。这是我的密码

    <div id="Families"><div id="arrow"></div>
    <?php
$server = "localhost";
$user = "root";
$pass = "";
$dbname = "help_someone";

//Creating connection for mysqli

$conn = new mysqli($server, $user, $pass, $dbname);

//Checking connection

if($conn->connect_error){
 die("Connection failed:" . $conn->connect_error);
}
$sql = "SELECT * FROM familjet";
$result = mysqli_query($conn, $sql)or die(mysqli_error());
$count = mysqli_num_rows($result);
while($row = mysqli_fetch_array($result)) {  ?>

<div class="cases"><?php echo '<img src="data:image/jpeg;base64,' . base64_encode($row['image']) . '" width="350" height="200">'?>               
<button type="button" class="show-modal1">SHIKO VIDEON</button>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery.showYtVideo.js"></script>
<script>
 jQuery(document).ready(function ($) {
            $('.show-modal1').on('click', function () {
                $.showYtVideo({
                    videoId: '<?php echo $row["videoID"];?>'
                });
            });
        });  
</script>
   <p><?php echo $row["pershkrimi"];?></p>
       </div><!--end cases-->
   <?php }
?>  
  </div><!--end Families-->

SHIKO VIDEON
jQuery(文档).ready(函数($){
$('.show-modal1')。在('click',函数(){
$.showYtVideo({
视频ID:“”
});
});
});  


问题是,当我单击按钮时,它只显示最后一个videoID,因此我只获得数据库中最后一条记录的视频。代码的其余部分工作正常。有人能建议我做什么吗?

在代码中,您正在循环脚本元素。可能你的循环最后回显的脚本就是正在执行的脚本

将脚本放在
标记的底部,并使其成为静态内容

<body>
 <?php
  //php loop here ...
 ?>
 <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script src="js/jquery.showYtVideo.js"></script>
</body>

对于下一个修复,我们将使用数据属性,每次我们用class.show modal单击按钮时,我们将获得数据视频id属性并使用它显示视频元素

<body>
 <div id="Families">
  <div id="arrow"></div>
  <?php
   $server = "localhost";
   $user = "root";
   $pass = "";
   $dbname = "help_someone";

   //Creating connection for mysqli
   $conn = new mysqli($server, $user, $pass, $dbname);

   //Checking connection
   if($conn->connect_error){
    die("Connection failed:" . $conn->connect_error);
   }
   $sql = "SELECT * FROM familjet";
   $result = mysqli_query($conn, $sql)or die(mysqli_error());
   $count = mysqli_num_rows($result);

   while($row = mysqli_fetch_array($result)) {
    echo"<div class='cases'>";
    echo"<img src='data:image/jpeg;base64,".base64_encode($row['image'])."' width='350' height='200'>";
    echo"<button type='button' class='show-modal' data-video-id='".$row['video_id']."'>SHIKO VIDEON</button>"; //use data-attribute, data-video-id
    echo"<p>".$row["pershkrimi"]."</p>";
    echo"</div>"; //close cases
   }
  ?>
  </div><!--end Families-->

  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="js/jquery.showYtVideo.js"></script>

  <script>
   $(document).on("click",".show-modal",function(){
    //get video from data-attribute
    var videoId = $(this).attr("data-video-id");
    alert("Your video ID:"+videoId);

    //show video
    $.showYtVideo({
     videoId: videoId
    });
   });
  </script>
</body>


我建议将您从数据库和视图中获取的信息分离开来。我想这就是让你失望的原因。您还拥有大量javascript,可以在数据库中创建永久记录。您应该考虑制作一个对象列表。然后在显示器上工作。不客气!如果有帮助的话,一定要把它标为正确答案。也谢谢你;D