Мне нужно показывать формы, когда я нажимаю на кнопки редактирования и ответа. Это система комментариев. И эта система состоит из вложенных комментариев (комментарии и ответы, первичный неупорядоченный список и вторичный неупорядоченный список соответственно). Но мои jQuery-скрипты работают не так, как я хочу. Я хочу, чтобы они показывали и скрывали, скрывали и показывали по одному Когда я нажимаю на один, это показывает. И когда я нажимаю на другую, та, которую она показывает, исчезает, а та, которую я нажимал, заставляет форму показываться вовремя. И так далее, и так далее, независимо от положения, независимо от того, находится ли эта кнопка в первичном или вторичном неупорядоченных списках («ul»). То же самое касается форм. Но этого не происходит. Происходит следующее: когда я нажимаю любую кнопку в любом месте, формы полностью исчезают, а когда я нажимаю на нее снова, она (форма) просто больше не отображается. Это мой код:
<html>
<head>
<title>Test it!</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div>
<ul class="list-of-comments">
<div class="allcomments">
<li class="noofcomments">
<div class="comment-wrap">
<div class="commentator-pic"></div>
<div class="comment">Comments show here</div>
<!--This is the position of the edit form-->
<div class="edit-form">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Edit comment</textarea>
<input type="submit" name="edit" value="Submit">
</form>
</div>
<br>
<!--These are the main comment buttons or controllers-->
<button class="edit-comment">Edit</button>
<button class="reply">Reply</button>
<button>Delete</button>
<!--This is the position of the reply form-->
<div class="reply-to-comment">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Submit comment</textarea>
<input type="submit" name="reply" value="Submit">
</form>
</div>
</div>
<!--Here we have the replies to the comment above-->
<ul class="replies">
<li class="clicktoviewreplies">Show/hide replies</li>
<div class="replies-wrap">
<div class="commentator-pic"></div>
<div class="replies-to-comment">Replies show here</div>
<!--This is the position of the edit form-->
<div class="edit-form">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Edit reply</textarea>
<input type="submit" name="edit" value="Submit">
</form>
</div>
<br>
<!--These are the main comment buttons or controllers-->
<button class="edit-comment">Edit</button>
<button class="reply">Reply</button>
<button>Delete</button>
<!--This is the position of the reply form-->
<div class="reply-to-comment">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Submit reply</textarea>
<input type="submit" name="reply" value="Submit">
</form>
</div>
</div>
</ul>
</li>
</div>
</ul>
</div>
<!--This is the FIRST SCRIPT-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
//$(document).on('click' , '.reply' , function(){
$('.reply').click(function(){
var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
$('.reply-to-comment').not(closestDiv.next('.reply-to-comment')).css("display", "none");
closestDiv.next('.reply-to-comment').slideToggle(100);
});
});
</script>
<!--This is the SECOND SCRIPT-->
<script>
$(document).ready(function(){
//$(document).on('click' , '.edit-comment' , function(){
$('.edit-comment').click(function(){
var closestDivtwo = $(this).closest('div'); // also you can use $(this).parent()
$('.edit-form').not(closestDivtwo.prev('.edit-form')).css('display', 'none');
closestDivtwo.prev('.edit-form').slideToggle(100);
//$(this).prev('.edit-form').slideToggle(100);
});
});
</script>
</body>
</html>
Что ж, взгляните на мои первый и второй сценарии и сделайте свои собственные выводы. Что может быть? Еще одна деталь: есть четыре кнопки (редактировать и отвечать на комментарии, редактировать и отвечать на ответы) и четыре формы (редактировать и отвечать на формы и редактировать формы ответов и ответов на ответы) и четыре класса.
Это css:
.reply-to-comment{
display:block;
}
.edit-form{
display:block;
}