当前位置： 文江博客话题详情

显示一系列可以隐藏/显示的 YouTube 嵌入内容

发布于 2024-10-31 12:14:15 字数 1722 浏览 14 评论 0原文

我的目标是在一个页面上显示一系列嵌入的 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>
原文

My goal is to show a series of embedded youtube videos on one page but allowing the user to hide or show any youtube video by clicking a button associated with a specific youtube video on the page. I made a form that submits the youtube embed code to a mysql database and I created a php file to retrieve every embed code using a for loop. For each iteration of the for loop, a youtube video will pop up with a corresponding button which will allow the user to hide or show the youtube video.

It works when there is only one entry in the mysql table but does not work when more youtube embed codes are uploaded. For example, when there are two youtube embed codes uploaded, two buttons are created, but when I click either of the two buttons, it will only show or hide the first youtube embed. None of the buttons will show the second youtube video.

here is the code with some edits:

<!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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

染柒℉ 2024-11-07 12:14:15

因为每个div都有相同的ID。您需要为每个 DIV 创建唯一的 ID 以显示或隐藏即。 frDocViewer1、frDocViewer2 等

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

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

然后您只需要确保每个 DIV 都有相应的 Javascript。我将使用您的 onclick 标记将 id 发送到 javascript 函数中。

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({$count})' />
       <div id='frDocViewer_{$count}' class='frDocViewer'>
         $iframe
       </div>
       ";
}

然后将 javascript 代码设置为如下所示：

var old_element = null;

function HideFrame(id) {
  var fr = document.getElementById("frDocViewer_" + id);

  if(fr != old_element)
  {
     fr.style.display = "block"
     if(old_element != null) old_element.style.display = "hide";
     old_element = fr;
  }
}

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

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

</style>

PS：此代码实际上可能无法编译，它只是一个粗略的指南。

Because each div has the same ID. You need to create unique ID's for each DIV to show or hide ie. frDocViewer1, frDocViewer2 etc

Use your $count variable to echo it's value onto the ID as it will increment by 1 for each iteration of the loop.

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

Then you just need to make sure that you have corresponding Javascript for each of those DIV's. I would send the id into the javascript function using your onclick tag.

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({$count})' />
       <div id='frDocViewer_{$count}' class='frDocViewer'>
         $iframe
       </div>
       ";
}

And then have the javascript code as something like:

var old_element = null;

function HideFrame(id) {
  var fr = document.getElementById("frDocViewer_" + id);

  if(fr != old_element)
  {
     fr.style.display = "block"
     if(old_element != null) old_element.style.display = "hide";
     old_element = fr;
  }
}

Then finally you need to change your CSS to make frDocViewer a class rather than a unique style. Notice above in the PHP echo string I added in the new class attribute to the DIV

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

</style>

PS: This code might not actually compile, it's just a rough guide.

回复 原文
往事风中埋 2024-11-07 12:14:15

我认为问题在于这一行：

<div id='frDocViewer'>

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

您需要更改代码，为每次迭代提供唯一的 ID，并在调用 HideFrame() 函数时传递对该元素的引用。然后该函数可以对该特定 ID 进行操作。

I think the problem is with this line:

<div id='frDocViewer'>

IDs are supposed to be unique across the entire page, but you're creating a new element with the same ID on each iteration of your loop. I haven't tested this, but my assumption is that when your JavaScript executes to hide/show that ID, it's only picking up the first ID by that name that it finds.

You'll need to change your code to give a unique ID to each iteration, and pass a reference to that element when you call your HideFrame() function. The function can then operate on that specific ID.

回复 原文
梦魇绽荼蘼 2024-11-07 12:14:15

嗯...从哪里开始...

如果您 getElementById ，其中您的 id 是 frDocViewer 并且 frDocViewer 被每个视频使用，将会有问题。

在我看来，像这样的东西怎么样：

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

function HideFrame(el) {
    ...
}

根本没有测试过，但是你需要寻找更通用的东西，然后硬编码一个ID......

hmm...where to start....

if you getElementById where your id is frDocViewer AND frDocViewer is used by every video there will be problems.

how about something like

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

function HideFrame(el) {
    ...
}

Not at all tested, but you NEED to go for something more GENERIC then hard coding an id....in my opinion

回复 原文
~没有更多了~

关于作者

鹤舞

暂无简介

0 文章
0 评论
604 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

苦中寻乐

文章 0 评论 0

lueluelue

文章 0 评论 0

嗼ふ静

文章 0 评论 0

王权女流氓

文章 0 评论 0

与花如笺

文章 0 评论 0

残酷

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文