숨겨진 양식이 있는데 링크를 클릭하면 해당 양식을 표시하고 싶습니다.
{% 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""할 수 있습니다. 어떻게 할 수 있습니까?
이를 달성하려면 .reply-comment클릭 한 .reply요소 와 관련된 항목을 찾기 위해 DOM을 탐색해야합니다 . 이 경우 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>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다