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
  • |トグル| William 12-11-1974 An oldie 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

イベント ソース オブジェクトに関連する要素を取得するには、セレクタで現在のオブジェクトをコンテキストとして渡す必要があります。また、html 要素は一意の ID を持つ必要があるため、id = single-toggle で div の一意の ID を使用class instead of idまたは生成するsupposed必要があります。

ライブデモ

id a 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 に答える