Question

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

这是我的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

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

Answer 2

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

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

希望有所帮助。

Answer 3

不是我要写的代码，但是在这里使用你自己的代码就是如何解决隐藏/显示问题：注意添加$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函数，这样它就知道要显示和隐藏哪一个

只有sql的第一个结果显示在unhidden时

3 个答案: