Трябва да показвам формуляри, когато щракна върху бутоните редактиране и отговор. Това е система за коментари. И тази система е съставена от вложени коментари (съответно коментари и отговори, първичен неподреден списък и вторичен неподреден списък). Но моите jQuery скриптове не работят както искам. Искам да се показват и скриват, скриват и показват едно по едно. Когато щракна върху един, той се показва. И когато щракна върху друг, този, който се показва, изчезва и този (бутон), върху който съм щракнал, кара формата да се показва навреме. И така нататък и така нататък, независимо от позицията, без значение дали този бутон е в първичните или вторичните неподредени списъци („ul“). Същото важи и за формулярите. Но това не се случва. Това, което се случва е, че когато щракна върху произволен бутон на произволна позиция, формулярите изчезват напълно и когато щракна върху него отново, той (формулярът) просто не се показва повече. Това е моят код:
<html>
<head>
<title>Test it!</title>
<link rel="stylesheet" type="text/css" href="/bgtest.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;
}
