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()
})
}