Использование переключателя для цикла - PullRequest
Новая
       41

Использование переключателя для цикла

0 голосов
/ 20 марта 2020

В моем шаблоне Django я извлекаю данные из БД и отображаю их в табличном формате, используя для l oop. Теперь, когда я нажимаю на поле «Имя», я хочу показать некоторые данные этого человека. Первоначально при отображении должна быть видна только таблица, что означает, что данные конкретного человека должны оставаться скрытыми, и когда я нажимаю на имя этого человека, должна отображаться информация об этом человеке. Теперь у меня 2 проблемы. Во-первых, когда я нажимаю на любое имя, отображается информация обо всех людях. Например, если в моей БД есть 3 записи и я нажимаю на имя какого-либо человека, то отображается информация обо всех этих трех людях. Я просто хочу отобразить информацию о человеке, на которого я нажал. И вторая проблема заключается в том, что после нажатия на название данные отображаются в верхней части таблицы. Я хочу, чтобы, если я нажму на второй ряд, то информация должна отображаться ниже 2-й строки и над 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();

    });
    });

Но оно не сработало.

1 Ответ

0 голосов
/ 20 марта 2020

замените свой идентификатор на класс 

    $(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>
...