如何使用JavaScript/Jquery在Django模板中只切换循环的一个元素?

如何使用JavaScript/Jquery在Django模板中只切换循环的一个元素?,javascript,html,jquery,django,Javascript,Html,Jquery,Django,我试图实现一个切换,在Django模板上为循环语句中的每个元素显示一个隐藏的DIV。问题是我只能设法使它只在循环的第一个元素上工作,或者一次在所有元素中工作(一个按钮触发每个隐藏的DIV来显示)。 我如何使用vanilla JS或在最坏的情况下使用Jquery实现这一点 这是我的模板中的html {% for comment in comments%} <div class="comment"> <p&

我试图实现一个切换,在Django模板上为循环语句中的每个元素显示一个隐藏的DIV。问题是我只能设法使它只在循环的第一个元素上工作,或者一次在所有元素中工作(一个按钮触发每个隐藏的DIV来显示)。 我如何使用vanilla JS或在最坏的情况下使用Jquery实现这一点

这是我的模板中的html

{% for comment in comments%}
            <div class="comment">
                <p><strong>{{comment.author}} {% if comment.author == article.author%}[Seller]{% endif %}</strong> said:</p>
                <p>{{comment.commentary}} {% if user.is_authenticated and article.status == "Active" and article.author == user %}<button id="test" class="test" onclick="myFunction()">Reply>></button></p>
                <div class="reply_box_container" id="reply_box_container" style="display:none">
                    <p><strong>Reply:</strong></p>
                    <form>
                        <div id="reply_textarea_container"><textarea  name="comment_textarea" rows="2" cols="50" placeholder="Write your reply here"></textarea></div>
                        <div id="reply_btn_container"><button class="btn btn-secondary" type="submit" name="comment_btn">submit</button></div>
                    </form>
                </div>
                {% endif %} 
                    {% if reply%}
                        <span class="reply">
                            <p><strong>{{article.author}}</strong> replied:</p>
                            <p>{{reply}}</p>
                        </span>
                    {% endif %}
                    <hr></hr>
            </div>  
        {% endfor %}
{%用于注释%中的注释]
{{comment.author}{%if comment.author==article.author%}[卖家]{%endif%}说:

{{comment.commentation}{%如果user.u经过身份验证且article.status==“活动”且article.author==user%}回复>>

回复:

提交 {%endif%} {%if reply%} {{article.author}}答复:

{{回复}

{%endif%}
{%endfor%}
这里是我尝试使用的Jquery:

    <script>
$(document).ready(function(){
  $(".test").click(function(){
    $(".reply_box_container").toggle();
  });
});
</script>

$(文档).ready(函数(){
$(“.test”)。单击(函数(){
$(“.reply\u box\u container”).toggle();
});
});

您走的是正确的道路,之所以只对第一个元素或所有元素起作用,是因为您在每个元素中都有相同的id,请尝试提供一个唯一的id,例如
id=“reply\u box\u container-{{forloop.counter}”
。请记住,
id=“test”
也应该是唯一的,您可以在
单击功能中传递计数器。

有关Django中循环计数器的更多参考信息。

那么,您只希望模型中的一个元素