Django template forloop values in jquery

Я использую Django для проекта вопросов и ответов. У меня есть шаблон с несколькими ответами и для каждого ответа у меня есть кнопка "Comment" для переключения текстовой области, где я могу добавить комментарий к самому ответу. Моя проблема в том, что я могу просто переключить первую кнопку "комментарий", потому что jquery получает первый элемент как уникальный id. Привожу код, чтобы было понятнее:

шаблон

script:

<script>
$("#ans_show_button").click(function(){$("#ans_text_id").toggle()})
</script>

Пока что я даже пробовал нечто подобное:

    var id = "#ans_show_button"+"{{ answer.id }}";
$("#ans_show_button").click(function(){$("#ans_text_id").toggle()})

, что, конечно, не сработало, так как я больше не нахожусь внутри цикла в части скрипта. Есть ли у вас какое-нибудь решение? Я пытался погуглить, но не смог ничего найти об этом.

Я бы предложил использовать JQuery для переключения соответствующего div-потомка из div рядом с кнопкой, и применить функцию ко всем кнопкам, используя класс, а не ID.

Фрагмент вопроса, слегка отредактированный для добавления классов ans_show_button и ans_text:

 <button class="btn btn-link ans_show_button">Commenta</button>
 <input type="hidden" name="" value="{{answer.id}}">
 <div class="col-6">
    <form action="{% url 'questions:add_answer_comment' pk=answer.id %}" method="post">
       {% csrf_token %}
        <div style="resize:vertical;display:none" class"ans_text">
           <textarea cols="5" rows="3" name="a_comment"  class="form-control"></textarea>

JS

<script>
$("button.ans_show_button").click(function(){
   $(this).siblings('div').first().find('div.ans_text').toggle();

   // intent: for the first sibling of the clicked button which is a div, 
   // look within it for a div with class "ans_text" and toggle that div 
   
});
</script>

Я не эксперт по JQuery, поэтому вам, возможно, придется отлаживать это.

В самом конце я решил свою проблему. Это было довольно просто, нужно было только преобразовать var i в let i. В итоге jquery выглядит так:

var answers_count = "{{answers_count}}"
for(let i=1;i<=answers_count;i++){
    var text_id = $("#ans_text_id"+i)
    $("#ans_show_button"+i).click(function(){
        $("#ans_text_id"+i).toggle()
    })
}
Вернуться на верх