在 for 循环中使用切换

Posted 2023-02-24

【中文标题】在 for 循环中使用切换

【英文标题】：Using toggle in for loop

【发布时间】：2020-07-01 07:39:34

【问题描述】：

在我的 Django 模板中，我从数据库中检索数据并使用 for 循环以表格格式显示它。现在，当我单击“姓名”字段时，我想显示该人的一些数据。最初，在显示时，只有表格应该是可见的，这意味着特定人的数据应该保持隐藏，当我点击那个人的名字时，应该显示关于那个人的信息。现在，我有两个问题。第一个是，当我单击任何名称时，会显示有关所有人的信息。例如，如果我的数据库中有 3 个条目，并且如果我单击任何人的姓名，则将显示有关所有 3 人的信息。我只想显示我点击的人的信息。而第二个问题是，点击名称后，数据显示在表格的最上方。我想假设我点击第二行，那么信息应该显示在第二行下方和第三行上方。

<table>
  <tr>
   <th>id</th>
   <th>Name</th>
   <th>Status</th>
  </tr>

  % for records in obj %
  <tr>
    <td>records.id</td>
    <td class="pop">records.name</td>
     <div class="dashboard">
                <div>
                <p>Toggled</p>
                </div>
     </div>
    <td>records.status</td>
  </tr> 
</table>

这里是切换脚本：

$(document).ready(function()
    $(".pop").click(function()
        $(".dashboard").toggle();
);
);

我也尝试了以下解决方案：

$(document).ready(function()
    $(".pop").click(function(e)

        $(this).nextall(".dashboard:lt(e)").toggle();

    );
    );

但是，它没有用。

【问题讨论】：

嗨 Solanki Ketul，请用 html 而不是 django 发帖

你使用 pop 作为 id 调用但调用 class 来代替

@KrishnaJonnalagadda 问题仍然存在.....

【参考方案1】：

将你的 id pop 替换为 class

    $(function()
        $('.pop').click(function()
            $(this).closest('tr').siblings().toggle();
        )
    )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
          <thead>

  <tr>
   <th>id</th>
   <th>Name</th>
   <th>Status</th>
   <th>Status 2</th>
  </tr>
</thead>
  <tr>
    <td>1</td>
    <td class="pop">User</td>
     <td><div class="dashboard">
                <div>
                <p>Toggled 1</p>
                </div>
     </div></td>
    <td>Active true 1</td>
  </tr> 
  <tr>
    <td>2</td>
    <td class="pop">User 2</td>
     <td><div class="dashboard">
                <div>
                <p>Toggled 2</p>
                </div>
     </div></td>
    <td>Active true 2</td>
  </tr> 
  <tr>
    <td>3</td>
    <td class="pop">User 3</td>
     <td><div class="dashboard">
                <div>
                <p>Toggled 3</p>
                </div>
     </div></td>
    <td>Active true 3</td>
  </tr> 
</table>

【讨论】：

其实我用的是for循环，数据库中有很多行需要检索。