单击foreach循环显示/隐藏xml内容

时间:2012-02-17 16:56:24

标签: php javascript xml foreach

我对此感到沮丧。我想要编写的代码是一个简单的xml阅读器,允许用户选择显示或隐藏哪些数据。

首先,此代码显示xml文件的标题,当用户点击标题时,日期和时间应显示在标题下。

问题是无论点击哪个标题,它都只显示/隐藏第一个标题下第一个标题的日期时间。

<script type="text/javascript">
   function toggle(element) {
   document.getElementById(element).style.display =     
(document.getElementById(element).style.display == "none") ? "" : "none";
}
</script>

<?php
$doc = simplexml_load_file('data.xml');
if($doc == TRUE){
foreach($doc->channel->item as $child){
   $title = $child->title;
   echo '<table>';
   echo '<tr>';
   echo '<td><a href="javascript:toggle(\'shit\')">'.$title.'</a></td></tr>';
   echo '<tr id="shit" style="display: none;">';
   echo '<td>';
   echo date("d.m.Y H:i", strtotime($child->pubDate));
   echo '</td></tr>';
   echo '</table>';
}
}
?>

3 个答案:

答案 0 :(得分:0)

这是因为ids在页面上应该是唯一的

 document.getElementById(element) 

总是返回第一个匹配元素,即使页面中有更多相同ID的元素

答案 1 :(得分:0)

您必须为要显示/隐藏的每个TR分配不同的(唯一)ID。现在你正在输出许多具有相同id“shit”的TR。

您还必须修改JavaScript以使用正确的ID。

答案 2 :(得分:0)

正如其他人所说,你需要为每个元素(你想要获得引用)拥有唯一的id。 最简单的方法是只为你选择的名称添加一个计数器,在这种情况下是“shit”,这是修改后的版本:

<script type="text/javascript">
   function toggle(num) {
   document.getElementById("shit" + num).style.display =     
(document.getElementById("shit" + num).style.display == "none") ? "" : "none";
}
</script>

<?php
$doc = simplexml_load_file('data.xml');
if($doc == TRUE){
$1 = 0;
foreach($doc->channel->item as $child){
   $title = $child->title;
   echo '<table>';
   echo '<tr>';
   echo '<td><a href="javascript:toggle(\''.$i.'\')">'.$title.'</a></td></tr>';
   echo '<tr id="shit'.$i.'" style="display: none;">';
   echo '<td>';
   echo date("d.m.Y H:i", strtotime($child->pubDate));
   echo '</td></tr>';
   echo '</table>';
}
}
?>