仅针对在模板生成的 html 列表中单击的项目的 Jquery 切换(可见/不可见)
Posted
技术标签:
【中文标题】仅针对在模板生成的 html 列表中单击的项目的 Jquery 切换(可见/不可见)【英文标题】:Jquery toggle (visible/invisible) for only the item clicked on in a template-generated html list 【发布时间】:2012-12-13 14:27:57 【问题描述】:代码
<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 |切换| 威廉 1974 年 12 月 11 日 老歌 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))
【问题讨论】:
对重复的元素使用相同的 id 不是一个好主意。将您的#single-toggle 更改为一个类并使用它。 我通常不会这样做,但使用它时希望它会做出不同的反应。 【参考方案1】:您需要将当前对象作为context in the selector 传递,以获取与事件源对象相关的元素。您还需要使用 class instead of id
或 generate unique ids 为 id = single-toggle 的 div 元素,因为 html 元素是 supposed
才能拥有唯一的 id。
Live Demo
我给了 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(); );
);
【讨论】:
当我添加this
时,切换按钮不再响应。
我用现场演示更新了我的答案,并解释了代码中的另一个缺陷。
仍然无法将 id 更改为 class。您的演示不能完全代表我的情况,因为我使用的是模板语言(例如Django templating language
或Jinja2
)。还有,为什么要反复使用ul
?
IMO 重要的是生成 html,无论我们使用什么语言。我错误地使用了 ul 重复你的重复 li 我在 domo 中更改检查这里,jsfiddle.net/rajaadil/8PjuF/1 请显示使用生成的 html
很高兴您向我展示了演示,但不幸的是这并不能解决问题。我编辑了原始帖子,因此您可以在我的 django 项目视图中看到生成 html 输出的函数示例。【参考方案2】:
您需要将功能集中在点击的div
内的div
...您需要使用的实际代码是:
$(function()
$("#single-toggle").click(
function() $("div.invisible-when-folded", this).toggle(); );
);
【讨论】:
以上是关于仅针对在模板生成的 html 列表中单击的项目的 Jquery 切换(可见/不可见)的主要内容,如果未能解决你的问题,请参考以下文章