jQuery 获取单击的元素父元素，然后获取其子元素

Question

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

{% 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 %}

单击reply时，我需要reply-comment的style为“”。 我怎样才能做到这一点？

Answer 1

为此，您需要遍历 DOM 以找到与单击的.reply元素相关的.reply-comment 。 在这种情况下，您可以通过使用closest()来获取最近的公共父级，然后使用find()来做到这一点。

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

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

最后一个可点击a元素应该总是有一个href属性。 这是因为在某些较旧的浏览器中，除非存在click事件，否则不会引发单击事件。 当发生这种情况时，您可以通过在事件处理程序中使用preventDefault()来阻止 URL 被更新。

说了这么多，试试下面的例子。 请注意，我从中删除了一些 HTML 以使其更短一些。

 $('.reply').on('click', function(e) { e.preventDefault(); $(this).closest('.comment__content').find('.reply-comment').show(); });

 .comment__avatar.avatar { width: 50px; height: 50px; }.reply-comment { display: none; }.submit.btn-primary { float: right; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="depth-1 comment"> <div class="comment__avatar"> {#<img class="avatar" src="{{ comment.user.profile_image.url }}" alt="">#} </div> <div class="comment__content"> <div class="comment__info"> <div class="comment__meta"> <a href="#" class="reply">Reply</a> </div> </div> <div class="respond reply-comment"> <form name="contactForm" method="post" action=""> <div class="message form-field reply-field">{{ comment_form.text }}</div> <button type="submit" class="submit btn--primary">Submit</button> </form> </div> </div> </li> <li class="depth-1 comment"> <div class="comment__avatar"> {#<img class="avatar" src="{{ comment.user.profile_image.url }}" alt="">#} </div> <div class="comment__content"> <div class="comment__info"> <div class="comment__meta"> <a href="#" class="reply">Reply</a> </div> </div> <div class="respond reply-comment"> <form name="contactForm" method="post" action=""> <div class="message form-field reply-field">{{ comment_form.text }}</div> <button type="submit" class="submit btn--primary">Submit</button> </form> </div> </div> </li> </ul>

Answer 2

您可以使用.closet 通过 class 名称查找父级，然后使用.find 查找子级。 最后使用 removeAttr("style") 删除样式

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