I am using Django for a question and answer project. I have a template with multiple answers and, for each answer, I have a "Comment" button to toggle a textarea where I can add a comment to the answer itself. My problem is, I can just toggle the first "comment" button, because jquery gets the first item as unique id. I post some code to be more clear:

template

{% for answer in answers %}
                    <div >
                        <div style="text-align: center">
                            <a title="Dai un voto positivo" href="" ><i ></i></a>
                            <br>
                            <span>{{ answer.count_all_the_votes }}</span>
                            <br>
                            <a title="Dai un voto negativo" href="" ><i ></i></a>
                            <br>
                            {% if request.user == question.post_owner %}
                            <a title="Accetta questa risposta come corretta" href="" ><i ></i></a>
                            {% endif %}
                        </div>
                    </div>
                    <div >
                        {{ answer.body|safe }}
                        <br>
                        <div >
                            {% if request.user == answer.answer_owner %}
                            <a href="">Modifica</a>
                            {% endif %}
                            &nbsp;&nbsp;&nbsp;
                            <a href="">Segnala</a>
                        </div>
                        <hr>
                        {% for comment in answer_comments %}
                            {% if comment.answer.id == answer.id %}
                            <small>{{ comment.comment }} - <a href="">{{ comment.commented_by }}</a> {{ comment.created_at }}</small>
                            <hr>
                            {% endif %}
                        {% endfor %}
                        <button  id="ans_show_button{{forloop.counter}}">Commenta</button>
                        <div >
                            <form action="{% url 'questions:add_answer_comment' pk=answer.id %}" method="post">
                                {% csrf_token %}
                                <div style="resize:vertical;display:none" id="ans_text_id{{forloop.counter}}">
                                    <textarea cols="5" rows="3" name="a_comment"  ></textarea>
                                    <button type="submit" >Commenta</button>
                                </div>
                            </form>
                        </div>
                        <div>
                            <div >
                                <div >
                                    Risposta data  {{ answer.created_at|naturaltime }} da
                                    <div>
                                        <img  src="{{answer.answer_owner.profile.picture.url}}">
                                        <a href="">{{ answer.answer_owner.username }} </a>
                                    </div>
                                </div>
                            </div>
                            {% if answer.is_edited == True and answer.answer_owner.id != answer.edited_by.id %}
                            <div >
                                <div >
                                    Risposta modificata {{ answer.edited_time|naturaltime }} da
                                    <div>
                                        <img  src="{{question.edited_by.profile.picture.url}}">
                                        <a href="">{{ answer.edited_by.username }} </a>
                                    </div>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}

script:

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

So far, I even tried something like that:

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

which of course didn't work, since I am not inside the loop anymore in the script part. Do you have any solution? I tried to google around but I couldn't find nothing about it.

EDIT I slightly changed my approach and I put this lines of code:

script:

    var answers_count = "{{answers_count}}"
for(i=1;i<=answers_count;i  ){
    var text_id = $("#ans_text_id" i)
    $("#ans_show_button" i).click(function(){$(text_id).toggle()})
}

The idea at the base is: I count the number of answers, later on I loop them and attach to the id I need. I changed the template in my original post for the relevant part (I just set a simple {{forloop.counter}} to be my counter variable). My problem now is that the textarea are toggled but just one of them. Either the first or the last one. I know there is something wrong around my Jquery but I couldn't find where.

CodePudding user response：

I would suggest using JQuery to toggle the relevant div descendant from a div next to the button, and applying the function to all buttons using a class rather than an ID.

Fragment of question, slightly edited to add classes ans_show_button and ans_text:

 <button >Commenta</button>
 <input type="hidden" name="" value="{{answer.id}}">
 <div >
    <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"  ></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>

I'm not a JQuery expert so you may have to debug this.

CodePudding user response：

In the very end I solved my problem. It was pretty easy, it was just necessary to transform var i into let i. The final jquery is:

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