取消隐藏时仅显示 sql 的第一个结果

Question

我之前问过一个问题，关于如何使用 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>

Answer 1

不是我要编写的代码，而是在这里使用您自己的代码来解决隐藏/显示问题：注意添加 $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 函数，以便它知道要显示和隐藏哪个

Answer 2

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

Answer 3

循环在哪里？我错过了什么吗？在您隐藏的 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>';

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

希望对您有所帮助。