从点击的元素 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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;<p class="card-text">Select today's teammates:</p>&nbsp; &nbsp;<ul class="list-group list-group-flush">&nbsp; &nbsp; &nbsp; {% for tech in techs %}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li class="list-group-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="name" name="{{tech.id}}">{{tech.name}}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="move" onclick="{{ selected_techs.append(tech) }}" style="float: right;">Add to the team</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>&nbsp; &nbsp; &nbsp; {% endfor %}</ul></p></div><div class="card-body" id="selected-list">&nbsp; <h3 class="title">You have selected the following teammates for today: </h3>&nbsp; <ul class="list-group list-group-flush" style="list-style-type: none;">&nbsp; &nbsp; &nbsp; {% for tech in selected_techs %}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li class="list-group-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="name" name="{{tech.id}}">{{tech.name}}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>&nbsp; &nbsp; &nbsp; {% endfor %}&nbsp; </ul></div>我认为这应该可以解决您的问题。只记得添加编辑1：尝试这个{% with selected_techs=[] %}<div class="card-body" id="team-list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;<p class="card-text">Select today's teammates:</p>&nbsp; &nbsp;<ul class="list-group list-group-flush">&nbsp; &nbsp; &nbsp; {% for tech in techs %}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li class="list-group-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="name" name="{{tech.id}}">{{tech.name}}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="move" onclick="{% selected_techs.append(tech) %}" style="float: right;">Add to the team</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>&nbsp; &nbsp; &nbsp; {% endfor %}</ul></p></div><div class="card-body" id="selected-list">&nbsp; <h3 class="title">You have selected the following teammates for today: </h3>&nbsp; <ul class="list-group list-group-flush" style="list-style-type: none;">&nbsp; &nbsp; &nbsp; {% for tech in selected_techs %}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<li class="list-group-item">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="name" name="{{tech.id}}">{{tech.name}}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</li>&nbsp; &nbsp; &nbsp; {% endfor %}&nbsp; </ul></div>{% endwith %}

Answer 2

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