Javascript jQuery先单击元素父级，然后单击其子级

我有一个隐藏的表单，当我点击链接时，我想显示该表单

{% for comment in comments %}
                        <li class="depth-1 comment">
                            <div class="comment__avatar">
                                {#<img width="50" height="50" class="avatar" src="{{ comment.user.profile_image.url }}" alt="">#}
                            </div>
                            <div class="comment__content">
                                <div class="comment__info">
                                    <cite>{{ comment.user.username }}</cite>
                                    <div class="comment__meta">
                                        <time class="comment__time">{{ comment.created_at }}</time>
                                        <a class="reply">Reply</a>
                                    </div>
                                </div>
                                <div class="comment__text" id="data">
                                    <p>{{ comment.text }}</p>
                                </div>
                                <div class="respond reply-comment" style="display: none">
                                    <form name="contactForm" id="contactForm reply-form" method="post" action="">
                                        <div class="message form-field reply-field">
                                            {{ comment_form.text }}
                                        </div>
                                        <button type="submit" class="submit btn--primary" style="float: right;">
                                            Submit
                                        </button>
                                    </form> <!-- end form -->
                                </div> <!-- end respond -->
                            </div>
                        </li> <!-- end comment level 1 -->
                    {% endfor %}

{%用于注释%中的注释]

{##}
{{comment.user.username}
{{comment.created_at}}
回复
{{comment.text}

{{comment_form.text}
提交

{%endfor%}

---

单击

回复

时，我需要

回复注释

的

样式

为“”。如何实现这一点？

要实现这一点，您需要遍历DOM以找到与单击的

.reply

元素相关的

.reply注释。在本例中，您可以使用
closest（）
，获取最近的公共父级，然后使用
find（）

您还应该避免使用内联
样式
属性。将样式放置在外部样式表中，以便更简单地覆盖它

此外，您不应该将
id
属性放入循环生成的HTML中。这是因为它创建的多个元素具有相同的
id
，这是无效的。删除
id
，或使用
class
属性按常见行为对元素进行分组

最后一个可单击的
a
元素应始终具有
href
属性。这是因为在一些较旧的浏览器中，
click
事件不会引发，除非它存在。发生这种情况时，可以使用事件处理程序中的
preventDefault（）
停止URL的更新

综上所述，试试下面的例子。请注意，我从中删除了一些HTML，使其略短一些


$（'.reply'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（this）.closest（'.comment__content'）.find（'.reply comment'）.show（）；
});
.comment\uuu avatar.avatar{
宽度：50px；
高度：50px；
}
.答复意见{
显示：无；
}
.submit.btn-primary{
浮动：对；
}



{##}
{{comment_form.text}
提交


{##}
{{comment_form.text}
提交

您可以使用.clock按类名查找父类，然后使用.find查找子类。最后使用removeAttr（“样式”）来删除样式

 $('.reply').on('click', function(){
    $(this).closest('div[class="comment__content"]').find('.reply-comment').removeAttr("style");
 })

您尝试了什么？相关：
div[class=“comment\uu content”]”
。。。或者只是
。comment\uu content
^^^^强制类上的属性选择器将导致浏览器无法对可用的类选择器应用性能增益，并可能导致DOM扫描，因为属性可以位于任何节点上。