Мне нужно показывать формы, когда я нажимаю кнопки редактирования и ответа. Это система комментариев. И эта система состоит из вложенных комментариев (комментариев и ответов, первичного неупорядоченного списка и вторичного неупорядоченного списка соответственно). Но мои сценарии 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;
}
