Question

几天前我创建了一个评论系统（几乎没有），我想添加Edit，Reply和Delete函数，并在搜索网页后（包括此内容）一）我管理，但现在我有一个jQuery的问题。我想使用它来创建一些按钮，点击它们会显示Reply，Delete和Edit表单，所以我搜索此论坛并找到一些解决方案，并应用他们，但我有各种各样的问题：

首先，当我使用.toggle时，它会显示所有评论的表单，然后我开始使用parents()，但是当我使用它时，没有任何作用！

以下是代码：

<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 a 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 to 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 to 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 to 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 to 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>

以下演示了我的节目/隐藏：jsfiddle 我还想提一下，这个页面是由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>

和我的PHP functions.php

Answer 1

您需要不具有相同名称的id值，因此所有这些值都需要切换为class。您还应该尝试包装删除表单，以便轻松地从单击的按钮遍历到包含元素。我特意做了删除按钮，所以如果还有其他问题，你应该能够应用相同的原则。

演示：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 a 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 to 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 to 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 to 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 to 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 to 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 to 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 to 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 to 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 to 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>

Jquery父级无法正常工作

1 个答案: