0

jqueryを使用してクリック時にSQL結果を非表示および表示する方法について、以前に質問しました。私を助けてくれたÞawに感謝します...今、私は似ているが異なる、「コードのバグ」のようなものに移りました。db テーブルからすべてのデータを取得する php ファイルがありますが、1 行だけが表示されます (テーブル内のデータのタイトル)。タイトルをクリックすると、残りのデータを返す非表示の 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

DOM 要素ごとに ID 属性値を 1 つだけ持つことができます。各 ID はドキュメントに対して一意である必要があります。

于 2013-06-07T03:15:24.140 に答える
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

私が書くコードではありませんが、ここで独自のコードを使用して、非表示/表示の問題を解決する方法を示します$rows['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 に答える