3

代码

  <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|，我都希望如此。aboutA friendly guycontact_info0474657434

尝试解决

$(function(){
  $("#single-toggle").click(
    function(){ $("div.invisible-when-folded").toggle(); } );
});

但不幸的是，这会切换列表中每个项目的字段，而不仅仅是我单击的那个。

编辑

视图.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))
4

2 回答 2

1

您需要在选择器中将当前对象作为上下文传递，以获取与事件源对象相关的元素。您还需要为 id = single-toggle 的 div 使用class instead of id或生成唯一 ID，因为 html 元素supposed将具有唯一 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(); } );
});
于 2012-12-28T09:46:56.620 回答
0

您需要将功能集中在div单击的范围内div...您需要使用的实际代码是：

$(function(){
  $("#single-toggle").click(
    function(){ $("div.invisible-when-folded", this).toggle(); } );
});
于 2012-12-28T09:51:15.160 回答