代码
<ul>
{% for item in lis %}
<li>
<div id="single-toggle">|Toggle|</div>
<div class="visible-when-folded">
<div class="name">{{ item.name }}</div>
<div class="date">{{ item.date }}</div>
</div>
<div class="invisible-when-folded">
<div class="about">{{ item.about }}</div>
<div class="contact_info">{{ item.contact_info }}</div>
</div>
</li>
{% endfor %}
</ul>
示例输出代码
- > |切换| 彼得 24-04-1990 一个友善的人 0474657434
- > |切换| 玛莎 22-02-1984 一个了不起的女孩 0478695675
- > |切换| 威廉 12-11-1974 一首老歌 0478995675
期望的行为
每当您点击 |Toggle|
时,我都希望看到 about
(例如 A friendly guy
)
和 contact_info
(例如 0474657434
)部分消失/重新出现。
尝试解决
$(function(){
$("#single-toggle").click(
function(){ $("div.invisible-when-folded").toggle(); } );
});
但不幸的是,这会切换列表中每一项的字段,而不仅仅是我点击的那一项。
编辑
views.py
from django.shortcuts import render_to_response
from django.template import RequestContext
def toggle(request):
lis = [{'name':'Peter', 'date':'24-04-1990', 'about':'A friendly guy',
'contact_info':'0474657434' },
{'name':'Martha', 'date':'22-02-1984', 'about':'An amazing gal',
'contact_info':'0478695675' },
{'name':'William', 'date':'12-11-1974', 'about':'An oldie',
'contact_info':'0478995675' }]
return render_to_response('page.html', {'lis':lis},
context_instance=RequestContext(request))
最佳答案
您需要将当前对象作为 context in the selector 传递获取与事件源对象相关的元素。您还需要使用 class 而不是 id
或 generate unique ids for div with id = single-toggle 因为html元素应该
具有唯一性ID。
我给了一个 id 为 class="single-toggle"的 div
改变
$("div.invisible-when-folded").toggle();
到
$("div.invisible-when-folded", this).toggle();
你的代码
$(function(){
$("#single-toggle").click(
function(){ $("div.invisible-when-folded", this).toggle(); } );
});
关于javascript - 仅在模板生成的 html 列表中单击的项目的 Jquery 切换(可见/不可见),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14067543/