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

Question

I'm frustrated with this. What I am trying to code is a simple xml reader that allows user to choose which data is shown or hidden.

First this code shows the titles of the xml-file and when user clicks a title, date and time should be shown under the title.

The problem is that no matter which title is clicked, it only shows/hides the date-time of the first title under the first title.

<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>';
}
}
?>

Answer 1

As the others said, you need to have a unique id per element (that you want to get a reference to). The simplest way is to just add a counter to the name you choose, in this case "shit", here's the modified version:

<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>';
}
}
?>