отображение серии вставок YouTube, которые можно скрыть / отобразить - PullRequest
Новая
       36

отображение серии вставок YouTube, которые можно скрыть / отобразить

0 голосов
/ 11 апреля 2011

Моя цель - показать серию встроенных видео 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>

Ответы [ 3 ]

1 голос
/ 11 апреля 2011

Потому что каждый div имеет одинаковый идентификатор. Вам нужно создать уникальные идентификаторы для каждого DIV, чтобы показать или скрыть, т.е. frDocViewer1, frDocViewer2 и т. д.

Используйте переменную $ count, чтобы вывести ее значение на идентификатор, поскольку оно будет увеличиваться на 1 для каждой итерации цикла. 

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

Тогда вам просто нужно убедиться, что у вас есть соответствующий Javascript для каждого из этих DIV. Я бы отправил идентификатор в функцию javascript, используя тэг onclick. 

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: Этот код может на самом деле не компилироваться, это всего лишь приблизительное руководство.

0 голосов
/ 11 апреля 2011

хмм ... с чего начать ....

если вы getElementById, где ваш идентификатор frDocViewer И frDocViewer используется для каждого видео, будут проблемы.

как насчет чего-то вроде 

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

function HideFrame(el) {
    ...
}

Совсем не проверено, но вам НУЖНО пойти на что-то более ОБЩЕЕ, чем жесткое кодирование идентификатора .... на мой взгляд

0 голосов
/ 11 апреля 2011

Я думаю, что проблема в этой строке: 

<div id='frDocViewer'>

Идентификаторы должны быть уникальными по всей странице, но вы создаете новый элемент с тем же идентификаторомна каждой итерации вашего цикла.Я не проверял это, но я предполагаю, что когда ваш JavaScript выполняется, чтобы скрыть / показать этот идентификатор, он выбирает только первый идентификатор с тем именем, которое он находит.

Вам нужно будет изменить свойкод для присвоения уникального идентификатора каждой итерации и передачи ссылки на этот элемент при вызове функции HideFrame().Затем функция может работать с этим конкретным идентификатором.

...