仅针对在模板生成的 html 列表中单击的项目的 Jquery 切换（可见/不可见）

Posted 2023-02-24

【中文标题】仅针对在模板生成的 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();  );
);