javascript - 仅在模板生成的 html 列表中单击的项目的 Jquery 切换(可见/不可见)

Question

代码

  <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))

Answer 1

您需要将当前对象作为 context in the selector 传递获取与事件源对象相关的元素。您还需要使用 class 而不是 id 或 generate unique ids for div with id = single-toggle 因为html元素应该具有唯一性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(); } );
});