0

我之前问过一个问题，关于如何使用 jquery 在单击时隐藏和显示 sql 结果。感谢 Þaw 帮助我...现在我转向类似但不同的东西，更多的是“代码中的错误”。我有一个 php 文件，它从 db 表中检索所有数据，只显示一行（表中我的数据的标题）。单击标题后，会显示一个隐藏的 div，它会返回其余数据。我在这里遇到的问题是，表格中有多个条目......显示/隐藏魔法仅适用于第一行，无论我点击哪个标题。

这是我的js

function showDiv() {
if (document.getElementById('hiddenDiv').style.display == 'block') {
        document.getElementById('hiddenDiv').style.display = 'none';
    } else {
        document.getElementById('hiddenDiv').style.display = 'block';
    }
}

这是我的 php/html

<div><h2 Style="margin:auto;display: block; padding-bottom: 0; margin-bottom: 0;    background: #e0741b; width: auto;color: white;" onclick="showDiv();"><?php echo   $rows['title']; ?></h2></div>
<div id="hiddenDiv" style="display:none">

<strong><h3 style="color:black" ><? echo $rows['name']; ?></h3></strong><br/>

<p style="color: grey; font-size:10pt;"><strong><?php echo $rows['details']; ?>  </strong></p>

<p style="font-size: 10pt;"> <strong>Email:</strong> <?php echo $rows['email']; ?></p>

<p style="font-size: 10pt;"> <strong>Phone:</strong> <?php echo $rows['phone']; ?></p>

<p style="font-size: 10pt;"> <strong>Link:</strong> <?php echo $rows['link']; ?></p>


</div>
4

3 回答 3

0

不是我要编写的代码，而是在这里使用您自己的代码来解决隐藏/显示问题：请注意，添加$rows['id']此代码假定数据有一个名为 id 的字段（将其更改为实际的唯一字段名称）

    <script>
        function showDiv(id) {
            if (document.getElementById('hiddenDiv'+id).style.display == 'block') {
                document.getElementById('hiddenDiv'+id).style.display = 'none';
            } else {
                document.getElementById('hiddenDiv'+id).style.display = 'block';
            }
        }
    </script>
--LOOP STARTS--
    <div>
        <h2 Style="margin:auto; display: block; padding-bottom: 0; margin-bottom: 0; background: #e0741b; width: auto;color: white;" onclick="showDiv(<?php echo $rows['id']; ?>);"><?php echo $rows['title']; ?></h2></div>
    <div id="hiddenDiv<?php echo $rows['id']; ?>" style="display:none">
        <strong><h3 style="color:black"><? echo $rows['name']; ?></h3></strong><br />
        <p style="color: grey; font-size:10pt;"><strong><?php echo $rows['details']; ?>  </strong></p>
        <p style="font-size: 10pt;"><strong>Email:</strong> <?php echo $rows['email']; ?></p>
        <p style="font-size: 10pt;"><strong>Phone:</strong> <?php echo $rows['phone']; ?></p>
        <p style="font-size: 10pt;"><strong>Link:</strong> <?php echo $rows['link']; ?></p>
    </div>
-- LOOP ENDS ---

所以你正在做的是给 hiddendiv 一个唯一的 id，然后将相同的 id 传递给 show/hide js 函数，这样它就知道要显示和隐藏哪个

于 2013-06-07T03:55:13.647 回答
0

循环在哪里？我错过了什么吗？在您隐藏的 DIV 中应该有类似下面的内容。这是一个通用表，请根据您的工作进行调整。我不确定您使用的是哪个数据库连接，这是假设 PDO。

echo '<table>';
echo '<thead><tr><td>Name</td><td>details</td><td>email</td><td>phone</td></tr></thead>';

while ($row = $stmt -> fetch(PDO::FETCH_ASSOC)) {
  echo '<tr>';
  echo '<td>' . $row['name'] . '</td>';
  echo '<td>' . $row['details'] . '</td>';
  echo '<td>' . $row['email'] . '</td>';
  echo '<td>' . $row['phone'] . '</td>';
  echo '</tr>';
}
echo '</table>';

我知道它与您想要的布局不同，但这是一般的想法。

希望有帮助。

于 2013-06-07T03:20:49.480 回答
0

每个 DOM 元素只能有一个 ID 属性值。每个 ID 对文档来说必须是唯一的。

于 2013-06-07T03:15:24.140 回答