从点击的元素 Django 中获取数据

Question

我有一个页面，用户可以在其中选择要添加到他的团队中的人员。页面的一侧是要选择的人员列表。当用户单击添加到团队时，它会转到我们拥有所选人员列表的右侧。我不明白如何从 django 的视图中获取所选一侧的数据。例如左边：<div class="card-body" id="team-list">                      <p class="card-text">Select today's teammates:</p>   <ul class="list-group list-group-flush">      {% for tech in techs %}         <li class="list-group-item">            <span class="name" name="{{tech.id}}">{{tech.name}}</span>            <span class="move" style="float: right;">Add to the team</span>         </li>      {% endfor %}在右边：<div class="card-body" id="selected-list">  <h3 class="title">You have selected the following teammates for today: </h3>  <ul class="list-group list-group-flush" style="list-style-type: none;">  </ul></div>点击由一个小的 js 点击事件处理，如下所示：    var selected = document.querySelector('#selected-list ul');    var team = document.querySelector('#team-list ul');function clickHandlerTeam(e){        if(e.target.classList.contains('move')){            if (e.target.textContent == 'Add to the team'){                console.log('changing add');                e.target.textContent ='Remove from the team';                selected.appendChild(e.target.parentNode);            } else {                console.log('changing remove');                e.target.textContent = 'Add to the team';                team.appendChild(e.target.parentNode);            }            console.log('****************');        }        return;}谢谢你的帮助

Answer 1

{{ selected_techs=[] }}

<div class="card-body" id="team-list">                   

   <p class="card-text">Select today's teammates:</p>

   <ul class="list-group list-group-flush">

      {% for tech in techs %}

         <li class="list-group-item">

            <span class="name" name="{{tech.id}}">{{tech.name}}</span>

            <span class="move" onclick="{{ selected_techs.append(tech) }}" style="float: right;">Add to the team</span>

         </li>

      {% endfor %}

</ul>

</p>

</div>

<div class="card-body" id="selected-list">

  <h3 class="title">You have selected the following teammates for today: </h3>

  <ul class="list-group list-group-flush" style="list-style-type: none;">

      {% for tech in selected_techs %}

         <li class="list-group-item">

            <span class="name" name="{{tech.id}}">{{tech.name}}</span>

         </li>

      {% endfor %}

  </ul>

</div>

我认为这应该可以解决您的问题。只记得添加

编辑1：

尝试这个

{% with selected_techs=[] %}

<div class="card-body" id="team-list">                   

   <p class="card-text">Select today's teammates:</p>

   <ul class="list-group list-group-flush">

      {% for tech in techs %}

         <li class="list-group-item">

            <span class="name" name="{{tech.id}}">{{tech.name}}</span>

            <span class="move" onclick="{% selected_techs.append(tech) %}" style="float: right;">Add to the team</span>

         </li>

      {% endfor %}

</ul>

</p>

</div>

<div class="card-body" id="selected-list">

  <h3 class="title">You have selected the following teammates for today: </h3>

  <ul class="list-group list-group-flush" style="list-style-type: none;">

      {% for tech in selected_techs %}

         <li class="list-group-item">

            <span class="name" name="{{tech.id}}">{{tech.name}}</span>

         </li>

      {% endfor %}

  </ul>

</div>

{% endwith %}

Answer 2

我找到了我的解决方案。我为模板中的每个元素添加了一个表单标签，并删除了 ul，将其替换为值为 tech.id 的隐藏输入，并替换了用户过去通过按钮单击的 spans 标签。然后通过获取 id 使用 views.py 处理它。