javascript - 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() 来获取最近的公共(public)父级，然后使用 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>