堆栈内存溢出
  简体   繁体   English

jQuery父无法正常工作

[英]Jquery parent not working properly

 原文  2015-09-29 22:53:26  0   1    javascript/ php/ jquery/ html/ css

问题描述

A few days ago I created a comment system (hardly) , and I wanted to add the Edit , Reply , and Delete function, and after searching the web (including this one) I managed , but now I have a problem with jQuery. 几天前，我创建了一个注释系统（几乎没有），我想添加Edit ， Reply和Delete函数，并在搜索了网络（包括该网络）之后进行了管理，但是现在jQuery出现了问题。 I want to use it in order to create some buttons that when clicked will display the Reply , Delete and Edit form, so I've search this forum and find some solutions, and applied them, but I have various problems: 我想使用它来创建一些按钮，单击这些按钮时将显示“ Reply ，“ Delete和“ Edit表单，因此我已经搜索了该论坛并找到了一些解决方案，并应用了它们，但是我遇到了各种问题：

First is that when I use .toggle , it will display a form for all comments , then I started to use parents() , but when I use this nothing works! 首先是当我使用.toggle ，它将显示所有注释的表单，然后我开始使用parents() ，但是当我使用它时，什么都没有！

Here is the 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 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>

Here is a demonstration of what is happening with my show/hide: jsfiddle and also I want to mention that this page is generated by index.php: 这是我的show / hide的演示： 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>

and my PHP functions.php 和我的PHP functions.php

1 个解决方案

解决方案1
 1 已采纳  2015-09-29 23:46:12

You need to not have same-name id values so those all need to be switched to class instead. 您不必具有同名的id值，因此需要将所有这些都切换为class 。 You should also try wrapping your delete form so you can easily traverse up from the clicked button to a containing element. 您还应该尝试包装删除表单，以便可以轻松地从单击的按钮向上遍历到包含元素。 I did the delete button specifically, so if there are any other issues, you should be able to apply the same principles. 我专门做了删除按钮，因此，如果还有其他问题，您应该可以应用相同的原则。

Demo: http://jsfiddle.net/0oky70dd/ 演示： http : //jsfiddle.net/0oky70dd/

CSS: 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: 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: 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Jquery模式不能正常工作 - Jquery modal not working properly jQuery focus（）无法正常工作 - Jquery focus() not working properly $ .inArray在jQuery中无法正常工作 - $.inArray in jquery is not working properly jQuery函数无法正常工作 - jQuery functions not working properly jQuery clearQueue无法正常工作 - jQuery clearQueue not working properly if语句在jquery中无法正常工作 - if statement not working properly in jquery jQuery fadeIn（）无法正常工作 - jQuery fadeIn() not working properly jQuery 1.7 .on无法正常工作 - jquery 1.7 .on not working properly jQuery的自动完成功能无法正常工作 - jquery autocomplete is not working properly jQuery事件无法正常工作 - jquery event is not working properly
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM