使用php,js,sql显示/隐藏多个div

时间:2015-01-26 23:37:10

标签: javascript php sql web show-hide

当显示div的内容时,我有一个问题。 我想使用idpost变量显示div,但我不知道如何做到这一点。 现在,当我按下显示/隐藏按钮时,只能使用第一个div。 我想用id var来做这件事。下一个代码是我在索引页面中使用包含的php文件。它向我展示了带有数组的数据库的所有记录。

<?php
    include "connections/con1.php";
                    mysql_select_db($database_con1, $con1);
                    $query_Recordset1 = "SELECT * FROM `general` ORDER BY `timestamp` DESC LIMIT 9 ";
                    $result = mySQL_query ( $query_Recordset1 ) ; while ( $row_Recordset1 = mySQL_fetch_array ( $result ) ){

    $idpost=$row_Recordset1['idpost'];
    $msg_id=$row_Recordset1['timestamp'];
    $titulo=$row_Recordset1['titulopost'];
    $message=$row_Recordset1['contentpost'];
        if  (strlen($message) > 100) {
              $text = substr($message, 0,600);

    echo $idpost;

    echo '<div class="article" target="<?php $idpost; ?>">
        <div id="noticia"> 

                <h1>
                    '.$titulo.''." ".''.$msg_id.'
                </h1>'.'
                <h2 id="noticia_corta">
                     '.$text.''."...".'

                <input type="button" name="answer" value="Show Div" onclick="showDiv()" /> 
                <input type="button" id="hideDivButton" value="Hide Div" onclick="hideDiv()" />

            <h2 id="hiddenDiv" style="display:none;">
                <div   class="answer_list"> 
                            '.$message.'
                    <input type="button" name="answer" value="Show Div" onclick="showDiv()" /> 
                    <input type="button" id="hideDivButton" value="Hide Div" onclick="hideDiv()" />
                </div>
            </h2>

        </div>
    </div>';
 }
 } ?>

这是执行div操作的js函数,但我不知道如何关注问题

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>

<script type='text/javascript'>
    function showDiv() {
   document.getElementById('hiddenDiv').style.display = "block";
document.getElementById('noticia_corta').style.display = "none";
}
function hideDiv() {
document.getElementById('hiddenDiv').style.display = "none";
 document.getElementById('noticia_corta').style.display = "block";
}

谢谢^^

1 个答案:

答案 0 :(得分:0)

使用而不是ID。 ID 适用于仅1个元素,类适用于多个。在HTML中,两个div应该具有相同的类。

<div class="showHide">

在Javascript代码中,而不是getElementById()使用getElementsByClassName()