[英]Get data from clicked elements Django
我有一个页面,用户可以在其中将 select 人添加到他的团队中。 页面的一侧是 select 的人员列表。 当用户单击添加到团队时,它会转到我们拥有所选人员列表的右侧。
我不明白如何从 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;
}
谢谢你的帮助
{{ 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 %}
我找到了我的解决方案。 我为模板中的每个元素添加了一个表单标签,并删除了 ul,将其替换为值为 tech.id 的隐藏输入,并替换了用户过去通过按钮单击的 spans 标签。 然后通过获取 id 使用 views.py 处理它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.