На пуговицу jQuery (видимую/невидимую) для только пункта, нажимают в произведенном шаблоном списке HTML

Кодекс

  
    {% for item in lis %}
  • <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>
  • {% endfor %}

код продукции В качестве примера

  • |Toggle | Питер 24-04-1990 Дружелюбный парень 0474657434
  • |Toggle | Марта 22-02-1984 Удивительная девочка 0478695675
  • |Toggle | Уильям 12-11-1974 Старое произведение 0478995675

Желаемое поведение

Я хотел бы это каждый раз, когда вы нажимаете |Toggle | о (например, дружелюбный парень ) и contact_info (например, 0474657434 ) часть dissapear/reappear.

Попытка решения

$(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))
3
nl ja de
Я обычно никогда не делал бы этого, но использовал его с тщетной надеждой, что это ответит по-другому.
добавлено автор Bentley4, источник
Используя тот же самый id для повторного элемента не хорошая идея. Измените свой #single-toggle на класс и используйте его.
добавлено автор ryadavilli, источник

3 ответы

Необходимо передать текущий объект как контекст в отборщике связать элемент с объектом источника события. Также необходимо использовать класс вместо id , или производят уникальные идентификаторы для отделения с id = единственная пуговица, как элементы HTML предполагаемый , чтобы иметь уникальные идентификаторы.

Живой демонстрационный пример

Я имею, дают отделение с id класс = "единственная пуговица"

Изменение

$("div.invisible-when-folded").Кggle();

К

$("div.invisible-when-folded", this).Кggle();

Вы кодируете

$(function(){
  $("#single-Кggle").click(
    function(){ $("div.invisible-when-folded", this).Кggle(); } );
});
1
добавлено
Когда я добавляю это пуговица просто doesn' t больше отвечают.
добавлено автор Bentley4, источник
Все еще не работает с изменением id к классу. Ваш демонстрационный пример не полностью представительный для моего случая, потому что я использую templating язык (такой как Джанго templating язык или Jinja2 ). Кроме того, почему вы неоднократно используете ul ?
добавлено автор Bentley4, источник
I' m счастливый вы показали мне демонстрационный пример, но к сожалению это не решает проблему. Я отредактировал оригинальную почту, таким образом, вы видите пример функции в моих взглядах на мой django проект, который производит вывод HTML.
добавлено автор Bentley4, источник
Это wasn' t из-за templating языка, я must' ve осуществил его неправильно прежде. Кто-либо еще имеющий эту проблему может найти альтернативные решения здесь.
добавлено автор Bentley4, источник
Я обновил меня ответ с живым демонстрационным примером и объяснил еще один недостаток в коде.
добавлено автор Adil, источник
IMO вещь, что вопрос - произведенный HTML безотносительно языка, который мы используем. Я по ошибке использовал ul repeadly ваш ваш литий повторения, я изменяю в проверке domo его здесь, jsfiddle.net/rajaadil/8PjuF/1 пожалуйста, покажите, что использование произвело HTML
добавлено автор Adil, источник

Необходимо передать текущий объект как контекст в отборщике связать элемент с объектом источника события. Также необходимо использовать класс вместо id , или производят уникальные идентификаторы для отделения с id = единственная пуговица, как элементы HTML предполагаемый , чтобы иметь уникальные идентификаторы.

Живой демонстрационный пример

Я имею, дают отделение с id класс = "единственная пуговица"

Изменение

$("div.invisible-when-folded").Кggle();

К

$("div.invisible-when-folded", this).Кggle();

Вы кодируете

$(function(){
  $("#single-Кggle").click(
    function(){ $("div.invisible-when-folded", this).Кggle(); } );
});
1
добавлено
Когда я добавляю это пуговица просто doesn' t больше отвечают.
добавлено автор Bentley4, источник
Все еще не работает с изменением id к классу. Ваш демонстрационный пример не полностью представительный для моего случая, потому что я использую templating язык (такой как Джанго templating язык или Jinja2 ). Кроме того, почему вы неоднократно используете ul ?
добавлено автор Bentley4, источник
I' m счастливый вы показали мне демонстрационный пример, но к сожалению это не решает проблему. Я отредактировал оригинальную почту, таким образом, вы видите пример функции в моих взглядах на мой django проект, который производит вывод HTML.
добавлено автор Bentley4, источник
Это wasn' t из-за templating языка, я must' ve осуществил его неправильно прежде. Кто-либо еще имеющий эту проблему может найти альтернативные решения здесь.
добавлено автор Bentley4, источник
Я обновил меня ответ с живым демонстрационным примером и объяснил еще один недостаток в коде.
добавлено автор Adil, источник
IMO вещь, что вопрос - произведенный HTML безотносительно языка, который мы используем. Я по ошибке использовал ul repeadly ваш ваш литий повторения, я изменяю в проверке domo его здесь, jsfiddle.net/rajaadil/8PjuF/1 пожалуйста, покажите, что использование произвело HTML
добавлено автор Adil, источник

Необходимо сосредоточить функцию на отделение в щелкнувшем отделение ... Фактический код, который необходимо использовать:

$(function(){
  $("#single-toggle").click(
    function(){ $("div.invisible-when-folded", this).toggle(); } );
});
0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

Django
Django
1 931 участник(ов)

Полезная информация и правила: https://github.com/django-ru/faq Вакансии и резюме: @django_jobs Пофлудить идём сюда: @django_flood Статистика чата: combot.org/chat/-1001063854692

django_jobs
django_jobs
916 участник(ов)

Поиск и предложения работы (Django) Правила: https://t.me/django_jobs/4 Вакансии с тегом #job улетают в канал @django_jobs_board Вопросы к @amureki Основной чат @pydjango

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

Django
Django
733 участник(ов)

Веб-фреймворк для перфекционистов с дедлайнами. Наша группа на vk: https://vk.com/django_framework В Discord: https://discord.me/django_framework по всем вопросам @MechanisM

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

django flood
django flood
71 участник(ов)

Флудилка джангистов Пока без правил