Fatal编程技术网
  • php/
  • Php 显示一系列可以隐藏/显示的youtube嵌入

Php 显示一系列可以隐藏/显示的youtube嵌入

php javascript loops youtube

Php 显示一系列可以隐藏/显示的youtube嵌入,php,javascript,loops,youtube,embed,Php,Javascript,Loops,Youtube,Embed,我的目标是在一个页面上显示一系列嵌入的youtube视频，但允许用户通过单击页面上与特定youtube视频关联的按钮来隐藏或显示任何youtube视频。我制作了一个表单，将youtube嵌入代码提交到mysql数据库，并创建了一个php文件，使用for循环检索每个嵌入代码。对于For循环的每次迭代，都会弹出一个youtube视频，其中包含一个相应的按钮，允许用户隐藏或显示youtube视频 当mysql表中只有一个条目时，它工作，但当上传更多youtube嵌入代码时，它不工作。例如，当上传了两个

我的目标是在一个页面上显示一系列嵌入的youtube视频，但允许用户通过单击页面上与特定youtube视频关联的按钮来隐藏或显示任何youtube视频。我制作了一个表单，将youtube嵌入代码提交到mysql数据库，并创建了一个php文件，使用for循环检索每个嵌入代码。对于For循环的每次迭代，都会弹出一个youtube视频，其中包含一个相应的按钮，允许用户隐藏或显示youtube视频

当mysql表中只有一个条目时，它工作，但当上传更多youtube嵌入代码时，它不工作。例如，当上传了两个youtube嵌入代码时，将创建两个按钮，但当我单击这两个按钮中的任何一个时，它将仅显示或隐藏第一个youtube嵌入代码。所有按钮都不会显示第二个youtube视频

以下是经过一些编辑的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>hide/show iframe</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

<style type="text/css">
<!-- 
#frDocViewer {
width:70%;
height:50%;
display:none;
}
-->
</style>

<script type="text/javascript">
<!--
function HideFrame() {
  var fr = document.getElementById ("frDocViewer");
  if(fr.style.display=="block") {
    fr.style.display="none";
  } else {
    fr.style.display="block";
  }
}
//-->
</script>

</head>
<body>

<?php
mysql_connect ("","","") or die(mysql_error());
mysql_select_db ("") or die(mysql_error());

$lastid = mysql_query ("SELECT * FROM embed ORDER BY id DESC LIMIT 1");
$lastid = mysql_fetch_assoc($lastid);
$lastid = $lastid['id'];

for ($count=1; $count<= $lastid ; $count++) {
  $iframe = mysql_query ("SELECT * FROM embed WHERE id=$count ");
  $iframe = mysql_fetch_assoc($iframe);
  $iframe = $iframe['url']; 

  echo "
       <image src='utube.gif' onclick='HideFrame()' />
       <div id='frDocViewer'>
         $iframe
       </div>
       ";
}    
?>
</body>
</html>


隐藏/显示iframe

我认为问题在于这一行：


<div id='frDocViewer'>






ID在整个页面上应该是唯一的，但是在循环的每次迭代中都创建了一个具有相同ID的新元素。我还没有对此进行测试，但我的假设是，当您的JavaScript执行以隐藏/显示该ID时，它只会根据找到的名称拾取第一个ID


您需要更改代码，为每个迭代提供唯一的ID，并在调用
HideFrame（）
函数时传递对该元素的引用。然后，该函数可以对该特定ID进行操作。
因为每个div都有相同的ID。您需要为每个div创建唯一的ID以显示或隐藏，如frDocViewer1、frDocViewer2等

使用$count变量将其值回显到ID上，因为循环的每次迭代都会增加1


echo "
       <image src='utube.gif' onclick='HideFrame()' />
       <div id='frDocViewer_{$count}'>
         $iframe
       </div>
       ";


最后，您需要更改CSS，使frDocViewer成为一个类而不是一个独特的样式。注意上面我在DIV的新class属性中添加的PHP echo字符串


<style type="text/css">
    .frDocViewer {
    width:70%;
    height:50%;
    display:none;
    }

</style>




.frDocViewer{
宽度：70%；
身高：50%；
显示：无；
}



PS：这段代码可能不会真正编译，它只是一个粗略的指南。
嗯……从哪里开始

如果您
getElementById
的id是
frDocViewer
并且每个视频都使用
frDocViewer
，则会出现问题

像这样的怎么样


<div onclick='HideFrame(this)' >
    <image src='utube.gif'/>
    ....
</div>

function HideFrame(el) {
    ...
}




....
函数HideFrame（el）{
...
}



根本没有经过测试，但你需要更通用的东西，然后再硬编码一个id…在我看来
我需要更改这部分吗#frDocViewer{width:70%；height:50%；display:none；}哦，是的，您需要将其设为class.frDocViewer，然后为每个DIV添加class=“frDocViewer”属性。我刚刚修改了上面的答案。我是否可以向id添加一个变量，然后它将访问#$count.frDocViewer？还是“正确”的方式？这会改变代码的这一部分吗？“var fr=document.getElementById（“frDocViewer”+id）；”var old_元素没有值，所以我应该这样设置它。不知道其是否有效：var old_element=document.getElementById（“frDocViewer_”+（id-1））；抱歉问了这么多问题。我只做了两个月，哈哈，因为{$count}将被替换为$count变量所在的任何数字，所以您的ID将是ID='frDocViewer_0'，ID='frDocViewer_1'，ID='frDocViewer_2'，等等。old_元素可以像var old_element=null这样设置。然后，每次更改youtube视频时，代码都会自动更改它，这要感谢old_element=fr行。您不需要使用此变量执行任何其他操作，因为它只是youtube视频的临时标识符，在显示新视频时需要隐藏。有意义吗？在if（fr！=old_element）{fr.style.display=“block”old_element.style.display=“hide”；old_element=fr；}之后是否应该有else语句？为什么“HideFrame（echo$count）”中必须有“echo”？

<style type="text/css">
    .frDocViewer {
    width:70%;
    height:50%;
    display:none;
    }

</style>



<div onclick='HideFrame(this)' >
    <image src='utube.gif'/>
    ....
</div>

function HideFrame(el) {
    ...
}