javascript - Jquery parent not working properly -
a few days ago created comment system (hardly) , , wanted add edit, reply, , delete function, , after searching web (including one) managed , have problem jquery. want use in order create buttons when clicked display reply, delete , edit form, i've search forum , find solutions, , applied them, have various problems:
first when use .toggle, display form comments , started use parents(), when use nothing works!
here code:
<body> <h1>comments (3)</h1> <div class="comment"> <form action="new.php" id="new_comment" method="post" name= "new_comment"> <textarea class="text_cmt" name="text_cmt" placeholder= "post new comment"> </textarea><br> <input type="submit" value="post"> </form> </div> <div class="comment"> <span class="author">guest</span><br> hhhhhhhhhhhhhhhhhhhh<br> <span class="date">posted: sep 27, 2015 | 12:55:48</span><br> <span class="replies">[+] 1 replies</span><span class="replies"></span> <form action="delete.php" id="delete" method="post" name="delete"> <input id="password" name="password" placeholder= "password delete" type="text"><input type="submit" value= "delete"> </form><input class="replytopic" name="send" type="submit" value= "reply"><button class="button2">edit</button><button class= "button3">delete</button> <div id="reply"> <form action="reply.php" class="reply" id="new_comment" method= "post" name="new_comment"> <input name="par_code" type="hidden" value="yswxtshchm"> <textarea class="text_cmt" name="text_cmt" placeholder= "reply guest"> </textarea><br> <input type="submit" value="reply"> </form> </div> <div id="children"> <form action="edit.php" id="edit" method="post" name="edit"> <textarea class="text_cmt" name="text_cmt"> </textarea><br> <input id="password" name="password" placeholder= "password edit" type="text"><input type="submit" value= "edit"> </form> <div class="child"> <span class="author">k86k</span><br> gstrdynbv<br> <span class="date">posted: sep 25, 2015 | 00:00:00</span><br> </div> </div> </div> <div class="comment"> <span class="author">guest</span><br> jjjjj<br> <span class="date">posted: sep 27, 2015 | 12:41:11</span><br> <span class="replies">[+] 1 replies</span><span class="replies"></span> <form action="delete.php" id="delete" method="post" name="delete"> <input id="password" name="password" placeholder= "password delete" type="text"><input type="submit" value= "delete"> </form><input class="replytopic" name="send" type="submit" value= "reply"><button class="button2">edit</button><button class= "button3">delete</button> </div> </body> <script> $(function() { $(".replytopic").on('click', function() { $(this).parent().next(".reply").toggle(); }); }) </script> <script> $( ".button3" ).click(function() { $( "form#delete" ).toggle(); }); </script> <script> $(function() { $(".replytopic").on('click', function() { $(this).parent().next("form#reply").toggle(); }); }) </script> here demonstration of happening show/hide: jsfiddle , want mention page generated index.php:
<?php get_comments('1234'); ?> <script> $(function() { $(".replytopic").on('click', function() { $(this).parent().next(".reply").toggle(); }); }) </script> <script> $( ".button3" ).click(function() { $( "form#delete" ).toggle(); }); </script> <script> $(function() { $(".replytopic").on('click', function() { $(this).parent().next("form#reply").toggle(); }); }) </script> and php functions.php
you need not have same-name id values need switched class instead. should try wrapping delete form can traverse clicked button containing element. did delete button specifically, if there other issues, should able apply same principles.
demo: http://jsfiddle.net/0oky70dd/
css:
body { font-family: 'open sans', sans-serif; font-size: 13px; } /* comments */ .comment { width: 45%; height: auto; padding: 7px 23px; background-color: #f5f5f5; box-shadow: 0px 2px 4px rgba(0,0,0,0.15), 0px 0px 3px rgba(0,0,0,0.15); margin: 0px auto; margin-bottom: 10px; text-align: justify; } .child { width: calc(100% - 92px); height: auto; padding: 3px 25px; margin: 10px 0px 10px 35px; box-shadow: -5px 0px 0px 0px #777; background-color: rgba(1,1,1,0.05); border: 1px solid rgba(1,1,1,0.1); } /* fonts */ .author, .date { font-size: 11.2px; font-weight: 600; color: #777; text-transform: uppercase; } .replies { color: #39c; font-weight: 600; cursor: pointer; } .replies:hover { color: #39f; } .text_cmt { width: calc(100% - 22px); height: auto; padding: 10px; background-color: #fff; border: 1px solid rgba(1,1,1,0.3); outline: none; font-family: 'open sans', sans-serif; font-size: 13px; line-height: 15px; margin-top: 10px; } h1 { width: 45%; height: auto; margin: 0px auto; font-size: 42px; font-weight: normal; } #hide { } #children { } #item { height: 40px; width: 30px; background-color: red; } button.edittopic { float: right; color: white; background-color: #3cb0fd; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; padding: 2px 10px 2px 10px; margin-left: 5px; } button.button2 { background-color: #2fc332; float: right; margin-left: 5px; border: 0px none; padding: 2px 10px; color: #fff; } button.delete_button { background-color: #d60202; float: right; margin-left: 5px; border: 0px none; padding: 2px 10px; color: #fff; } form.form_delete { width: 35.5%; display: none; } form#edit { display: none; } form.reply { display: none; } javascript:
$(function() { $(".edittopic").on('click', function() { $(this).parent().next(".reply").toggle(); }); $( ".delete_button" ).click(function() { $(this).parents(".delete_wrapper").find(".form_delete").toggle(); }); $(".edittopic").on('click', function() { $(this).parent().next("form#reply").toggle(); }); }) html:
<h1>comments (3)</h1> <div class="comment"> <form action="new.php" method="post" enctpye="" name="new_comment"> <textarea class="text_cmt" name="text_cmt" placeholder="post new comment"></textarea> <br /> <input type="submit" value="post" /> </form> </div> <div class="comment" name="yswxtshchm"><span class="author">guest</span><br /> hhhhhhhhhhhhhhhhhhhh<br /> <span class="date">posted: sep 27, 2015 | 12:55:48</span><br /> <span class="replies">[+] 1 replies</span><span class="replies">reply</span> <div class="delete_wrapper"> <form action="delete.php" method="post" enctpye="" class="form_delete"> <input name="password" type="text" placeholder="password delete" id="password"> <input type="submit" value="delete" /> </form> <input type="submit" value="reply" class="replytopic" name="send" /> <button class="button2">edit</button> <button class="delete_button">delete</button> </div> <div id="reply"> <form class="reply" action="reply.php" method="post" enctpye="" name="new_comment"> <input type="hidden" name="par_code" value="yswxtshchm" /> <textarea class="text_cmt" name="text_cmt" placeholder="reply guest"></textarea> <br /> <input type="submit" value="reply" /> </form> </div> <div name="children" id="children"> <form action="edit.php" method="post" enctpye="" id="edit"> <textarea class="text_cmt" name="text_cmt"></textarea> <br /> <input name="password" type="text" placeholder="password edit" id="password"> <input type="submit" value="edit" /> </form> <div class="child" name="tsrdyj5645w3"><span class="author">k86k</span><br /> gstrdynbv<br /> <span class="date">posted: sep 25, 2015 | 00:00:00</span><br /> </div> </div> </div> <div class="comment" name="f6abyrq5wg"><span class="author">guest</span><br /> jjjjj<br /> <span class="date">posted: sep 27, 2015 | 12:41:11</span><br /> <span class="replies">[+] 1 replies</span><span class="replies">reply</span> <div class="delete_wrapper"> <form action="delete.php" method="post" enctpye="" class="form_delete"> <input name="password" type="text" placeholder="password delete" id="password"> <input type="submit" value="delete" /> </form> <input type="submit" value="reply" class="replytopic" name="send" /> <button class="button2">edit</button> <button class="delete_button">delete</button> </div> <div id="reply"> <form class="reply" action="reply.php" method="post" enctpye="" name="new_comment"> <input type="hidden" name="par_code" value="f6abyrq5wg" /> <textarea class="text_cmt" name="text_cmt" placeholder="reply guest"></textarea> <br /> <input type="submit" value="reply" /> </form> </div> <div name="children" id="children"> <form action="edit.php" method="post" enctpye="" id="edit"> <textarea class="text_cmt" name="text_cmt"></textarea> <br /> <input name="password" type="text" placeholder="password edit" id="password"> <input type="submit" value="edit" /> </form> <div class="child" name="gr425g4"><span class="author">hhhh</span><br /> reeeeee<br /> <span class="date">posted: sep 23, 2015 | 00:00:00</span><br /> </div> </div> </div> <div class="comment" name="tsa9y9hdvz"><span class="author">guest</span><br /> kkkk<br /> <span class="date">posted: sep 26, 2015 | 16:00:39</span><br /> <span class="replies">[+] 1 replies</span><span class="replies">reply</span> <div class="delete_wrapper"> <form action="delete.php" method="post" enctpye="" class="form_delete"> <input name="password" type="text" placeholder="password delete" id="password"> <input type="submit" value="delete" /> </form> <input type="submit" value="reply" class="replytopic" name="send" /> <button class="button2">edit</button> <button class="delete_button">delete</button> </div> <div id="reply"> <form class="reply" action="reply.php" method="post" enctpye="" name="new_comment"> <input type="hidden" name="par_code" value="tsa9y9hdvz" /> <textarea class="text_cmt" name="text_cmt" placeholder="reply guest"></textarea> <br /> <input type="submit" value="reply" /> </form> </div> <div name="children" id="children"> <form action="edit.php" method="post" enctpye="" id="edit"> <textarea class="text_cmt" name="text_cmt"></textarea> <br /> <input name="password" type="text" placeholder="password edit" id="password"> <input type="submit" value="edit" /> </form> <div class="child" name="ftdre76igu"><span class="author">kkkk</span><br /> reply<br /> <span class="date">posted: sep 16, 2015 | 00:00:00</span><br /> </div> </div> </div>
Comments
Post a Comment