Question

这是一个非常愚蠢的问题，但是我在任何地方都找不到答案！

我有一个for循环，并且每个项目都有一个手风琴，如下所示。

问题在于，手风琴总是具有相同的ID，因此当我将其打开时，它们全部都打开了。

如何系统地为每个值分配一个不同的值，以便它们独立打开？

我试图这样命名手风琴：

<div id="accordion{{ todo.taskid}}">

但是它们仍然一次全部打开

   <tbody>
          {% for todo in todo_list %}
          {% if todo.complete is False %}
          <tr class="table">
      <td>{{ todo.taskid }}</td>
      <td>{{ todo.text }}</td>
      <td>{{ todo.complete }}</td>
      <td>{{ todo.creator }}</td>
      <td>{{ todo.assignee }}</td>
      {% if todo.priority == "High" %}
      <td class="table-danger">{{ todo.priority }}</td>
      {% elif todo.priority == "Medium"  %}
      <td class="table-warning">{{ todo.priority }}</td>
{% else %}
      <td class="table-info">{{ todo.priority }}</td>

      {% endif %}
      <td>{{ todo.due }}</td>
      <td>
              <form action="/viewnote/" name="form1", id="form1" method="post">
                      {% csrf_token %}
                      <button name="viewnote" type="submit"  value={{ todo.taskid }}  class="btn btn-info">Notes</button></form></td>
<th scope="col"><form action="/complete/" name="form2", id="form2" method="post">
                      {% csrf_token %}
                      <button name="donebutton" type="submit"  value={{ todo.taskid }}  class="btn btn-success">Done</button></th>
                      </form>
      <th scope="col"><form action="/delete/" name="form1", id="form1" method="post">
                      {% csrf_token %}
                      <button name="deletebutton" type="submit"  value={{ todo.taskid }}  class="btn btn-danger">Delete</button></th></form>

          </tr>
          <tr>
                  <td colspan="5">
<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <font color="black">Add Task Notes</font>
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
                       <form action="/addnote/" name="form1", id="form1" method="post">
                      {% csrf_token %}
                       <div class="form-group">
    <textarea name="note" class="form-control" id="exampleFormControlTextarea1" rows="2"></textarea>
  </div>
  <div class="form-group">
          <input type="text" name="noteid"  class="form-control" id="noteid" aria-describedby="emailHelp" placeholder="Enter Note ID">
  </div>
  <div align="right">

                  <button name="addnote" type="submit"  value={{ todo.taskid }}  class="btn btn-secondary">add note</button>
                      </form>
                  </div></div></div>

</div>

              </td>

              <td colspan="5">
<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                <font color="black">Edit Task</font>
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
      <form action="/update/" name="form1", id="form1" method="post">
        {% csrf_token %}
   <div class="form-group">
           <select name="assignee" class="form-control" id="exampleFormControlSelect1">
      <option>Select Assignee</option>
      <option>kikee</option>
      <option>kieran</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

  <div class="form-group">
           <select name="priority" class="form-control" id="exampleFormControlSelect1">
      <option>Select Priority</option>
      <option>High</option>
      <option>Medium</option>
      <option>Low</option>
    </select>
  </div>
   <div class="form-group">
          <input type="text" name="due"  class="form-control" id="task" aria-describedby="emailHelp" placeholder="Due Date YYYYMMDD">
   </div>

           <button type="submit"  name="editbutton" value={{ todo.taskid }} class="btn btn-warning">Edit Task</button>
</form>

      </div></div></div>

</div>

              </td>
    </div></div></div>

</div>



<!--                      <form action="/addnote/" name="form1", id="form1" method="post">
                      {% csrf_token %}
                       <div class="form-group">
    <textarea name="note" class="form-control" id="exampleFormControlTextarea1" rows="2"></textarea>
  </div>
  <div class="form-group">
          <input type="text" name="noteid"  class="form-control" id="noteid" aria-describedby="emailHelp" placeholder="Enter Note ID">
  </div>
  <div align="right">
  <table>
          <td>
                  <button name="addnote" type="submit"  value={{ todo.taskid }}  class="btn btn-secondary">add note</button>
                      </form></td><td>
              <form action="/viewnote/" name="form1", id="form1" method="post">
                      {% csrf_token %}
                      <button name="viewnote" type="submit"  value={{ todo.taskid }}  class="btn btn-info">view notes</button></td> </table>
              </th>
              </form>-->
                          </td>

          </tr>
         {% endif %}
  {% endfor %}
  </tbody>

Answer 1

您可以为每个todo.id项目分配一个唯一的属性值，例如accordion。

为此将html中的accordion ID更改为accordion{{todo.id}}。像这样更改它：

<div id="accordion{{todo.id}}">
....

将{{todo.id}}添加到您希望在每次迭代中都不同的html的任何部分。

使用Django一次打开所有手风琴

1 个答案: