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

Вы можете использовать .closet для поиска родителя по имени класса, а затем использовать .find для поиска ребенка. Наконец, используйте removeAttr ("style") для удаления стиля

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

Answer 2

Чтобы достичь этого, вам нужно пройти через DOM, чтобы найти .reply-comment, относящийся к нажатому элементу .reply. В этом случае вы должны сделать это, используя closest(), чтобы получить ближайшего общего родителя, затем find().

. Вам также следует избегать использования встроенных атрибутов style. Поместите свой стиль во внешние таблицы стилей, чтобы его было проще изменить.

Кроме того, вы не должны помещать атрибуты id в HTML, сгенерированные al oop. Это потому, что он создает несколько элементов с одинаковым id, что недопустимо. Либо удалите атрибуты id, либо используйте атрибуты class, чтобы сгруппировать элементы по общему поведению.

Элементы с последним щелчком a всегда должны иметь атрибут href. Это связано с тем, что в некоторых старых браузерах событие click не вызывается, если оно не присутствует. Вы можете остановить обновление URL, когда это происходит, используя preventDefault() в обработчике событий.

С учетом всего сказанного попробуйте следующий пример. Обратите внимание, что я удалил часть 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>