仅针对在模板生成的 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 idgenerate 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 languageJinja2)。还有,为什么要反复使用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 切换(可见/不可见)的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 视频:动态生成的视频标签仅第一次播放

单击时从循环中禁用按钮

dojo - 模板中的单击事件不起作用

处理仅在单击时更新 UI 数据的活动的后按?

单击时如何仅更改离子列表中的一种离子项颜色?

仅针对特定分支的 gitlab 触发管道