循环显示时如何将onclick事件应用于html标签

debugcn 发表于 Dev

维伦德拉辛（Virendrasingh）

我创建了一个Php页面，该页面从MySQL数据库检索数据。我将四个记录插入数据库。数据在index.php页面上显示正常，但我想显示记录，如此处所附图像所示。我希望所有记录都已关闭，并且在单击名称时它将打开。其他的保持关闭状态，而其他的保持打开状态时，先前的关闭状态。现在，当我单击任何名称在浏览器中运行时，仅显示第一条记录。（或使用php，MySQL等执行此操作的任何其他方法）有帮助吗？

index.php：

<?php

ob_start();
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'test');

$connection = new mysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());

$select=mysql_query("SELECT * FROM sample order by id desc");
$i=1;
while($userrow=mysql_fetch_array($select))

{
$id=$userrow['id'];
$username=$userrow['username'];
$usercity=$userrow['usercity'];
$useraddress=$userrow['useraddress'];
$usermail=$userrow['emailid'];
$usermobile=$userrow['mobileno'];
$created=$userrow['created']
?>
<div class="display" style="width:500px">
<!-------------------- User Name : --------------------------------->
  <p id="User-Name" style="color:#999" onclick="showDiv();"> Name- <span style="color: #999"><?php echo $username; ?></span>
  <span class="delete" title="Delete"> X </span></a>
  </p>
  <br />
<!--------------------- User City : ----------------------------------->
  <p style="margin-left: 300px; margin-top: -45px; color:#999">City- <span style="color:#999"><?php echo $usercity; ?></span></p>
  <br />

  <div id="Entries" >
<!---------------------- User address : -------------------------------->
  <p style="color:#999">Address-  <span style="color:#999"><?php echo $useraddress; ?></span>

  </p>
  <br />
<!------------------ User Email Id : -------------------------------->  
  <p style="color:#999">Email-  <span style="color:#999"><?php echo $usermail; ?></span>
    <a href="edit.php?id=<?php echo $id; ?>"><span class="edit" title="Edit"> E </span></a>
  </p>
<!--------------------- User Mobile : --------------------------------->
  <br />
  <p style="color:#999">Mobile-  <span style="color:#999"><?php echo $usermobile; ?></span>
  </p>
 <!-------------------- User Created : -------------------------------> 
  <br />
  <p style="color:#999">  <span style="color:#999"><?php echo $created; ?></span>
  </p>
  <br />
  </div>
</div>

<?php } ?>

<script>
function showDiv() 
{
  document.getElementById('Entries').style.display = "block";
}
</script>

<style>
#Entries
{
  display:none;
}
</style>

N·穆罕默德·坦吉德（N Muhammed Thamjeed）

在文档ID中，ID是唯一的，这意味着只能提供一个ID，因此将您更改<div id="Entries" >为<div class="Entries" >（同时循环打印相同的div标签多次）。

现在从改变你的onclick事件<p>，以<div>这样的：<p style="color:#999" onclick="showDiv();">改变<div class="display" onclick="showDiv(this);" style="width:500px;border:1px solid #eee;margin-bottom:2px;">（那么只有你可以选择“div.Entries”，这是内部div.display，不是里面<p>）

现在，在你的代码的底部，从改变你的CSS样式标签#Entries到.Entries（因为我们在div中进行了更改）

只需将以下代码添加到您的页面中

<script>
function showDiv(obj) 
{
    $('.Entries').css('display','none');
 var div = $(obj).find('.Entries').css('display','block');
}
</script>

完整的代码如下：

<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.0.0.js" integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo=" crossorigin="anonymous"></script>
    </head>
<body>
      <?php

      $database = array(
      'one' => array('name' => 'john' , 'city' => 'noida' , 'addr' => 'xyz','mail' => '[email protected]'),
      'two' => array('name' => 'jimi' , 'city' => 'india' , 'addr' => 'abc','mail' => '[email protected]'),
      'three' => array('name' => 'foo' , 'city' => 'china' , 'addr' => 'pqr','mail' => '[email protected]'),
      'four' => array('name' => 'apple' , 'city' => 'america' , 'addr' => 'lmno','mail' => '[email protected]'),
      );

           foreach ($database as $row) {

            $username = $row['name'];
            $usercity = $row['city'];
            $useraddress = $row['addr'];
            $usermail = $row['mail'];

        echo    '<div class="display" onclick="showDiv(this);" style="width:500px;border:1px solid #eee;margin-bottom:2px;">
            <!-------------------- User Name : --------------------------------->
              <p style="color:#999"> Name- <span style="color: #999">'.$username.' ?></span>
              <span class="delete" title="Delete"> X </span></a>
              </p>
              <br />
            <!--------------------- User City : ----------------------------------->
              <p style="margin-left: 300px; margin-top: -45px; color:#999">City- <span style="color:#999">'.$usercity.'</span></p>
              <br />

              <div class="Entries" >
            <!---------------------- User address : -------------------------------->
              <p style="color:#999">Address-  <span style="color:#999">'.$useraddress.'</span>

              </p>
              <br />
            <!------------------ User Email Id : -------------------------------->  
              <p style="color:#999">Email-  <span style="color:#999">'.$usermail.'</span>
                <a href="edit.php?id=<?php echo $id; ?>"><span class="edit" title="Edit"> E </span></a>
              </p>
              <br />
              </div>
            </div>';
    }

      ?>

</body>
<script>
function showDiv(obj) 
{
    $('.Entries').css('display','none');
 var div = $(obj).find('.Entries').css('display','block');
}
</script>

<style>
.Entries
{
  display:none;
}
</style>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-06-23

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

循环显示时如何将onclick事件应用于html标签

循环显示时如何将onclick事件应用于html标签

当循环显示时，如何将onclick事件应用于html标签

显示时如何将动画应用于元素？

如何将CSS样式应用于标签？

如何将 CSS 应用于输入标签值

如何将css应用于标签的属性？

如何将jQuery SlideToggle应用于foreach循环？

如何将CSS应用于html属性

如何将Knockout绑定应用于<html>元素？

将CSS应用于html标签

将onclick事件应用于页面加载时不存在的元素

将onclick事件应用于页面加载时不存在的元素

当有弹出框时，如何将dojox.widget.Standby.show应用于html的整个正文

如何将光标指针属性应用于（单击）事件处理程序？

如何将多个click事件侦听器应用于android中的图像

如何将标签应用于Ansible任务文件中的每个命令？

如何将两种颜色应用于标题标签的底部边框？

如何将省略号应用于CheckBoxList控件标签文本

如何将margin-top应用于<small>标签？

如何将Geom标签应用于最后一个值数据点

haml / RoR：如何将％i应用于Rails标签的子字符串

如何将每个系列变量应用于R中的循环计算

如何将For Each循环应用于某个书签或页码之后的段落？

将ng-class应用于body标签时，如何避免延迟？

将ng-class应用于body标签时，如何避免延迟？

如何将多ngif应用于表上的数据显示？

如何将淡入淡出效果应用于“加载更多”“显示更少” Javascript

将CSS应用于HTML select标签

如何将属性应用于悬停时的上一个兄弟？

单击拇指时，如何将淡入/淡出应用于全尺寸图像？