@lite_version

Как использовать один js для разных id на странице?

Есть html форма в которой через цикл выводятся данные, как пример:
{% for el in form%}
     <div id="title{{ el.pk }}" >{{ el.titles }}</div>
     <div id="content{{ el.pk }} " style="display:none;">{{ el.text }}</div>
{% endfor %}

Js для показа и скрытия контента для одной формы написал:
$('#title').click(function () {
        if ($('#content').is(":hidden")) {
            $('#content').slideDown("slow");
        } else {
            $('#content').slideUp("slow");
        }
        return false;
    });

Но не понимаю, как передать pk в функцию, чтобы можно было использовать этот js при множественном выводе. Вроде как лучше прописать классы и их передавать каким-то образом в js, но при попытках какая-то нерабочая ерунда выходит.
  • Вопрос задан
  • 164 просмотра
Решения вопроса 2
sharomet
@sharomet
Front-End
Если структура html не будет меняться, то можно так
$('#title').click(function () {
    let $content = $(this).next();
    if ($content.is(":hidden")) {
         $content.slideDown("slow");
     } else {
         $content.slideUp("slow");
    }
   return false;
 });

Или можно для элемента title добавить событие onclick и передать туда метод с параметром. Только посмотрите правильный синтаксис для этого шаблонизатора. Примерно так:
<div id="title{{ el.pk }}" onclick="mainFunc('content'{{el.pk}})" >{{ el.titles }}</div>


function mainFunc (id) {
  let $content = $('#' + id);
  if ($content.is(":hidden")) {
      $content.slideDown("slow");
  } else {
      $content.slideUp("slow");
  }
  return false;
}
Ответ написан
Комментировать
irishmann
@irishmann
Научись пользоваться дебаггером
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
RussianNinja
@RussianNinja
Всем динамически создаваемым элементам прописать класс и вешать обработчик события на класс, а не на id.

$(document).on('click', '.title', function () {
      // использовать $(this) для выбора элемента, по которому кликнули
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы