javascript - Jquery 父级无法正常工作-6ren

javascript - Jquery 父级无法正常工作

转载作者：太空宇宙更新时间：2023-11-04 11:20:14

前几天(勉强)做了一个评论系统，想添加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

最佳答案

你不需要有同名的 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>

关于javascript - Jquery 父级无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32855032/

文章推荐：带有刻度标签的 Python PyQt4 slider

文章推荐： java - 使用内容值在 sqlite 中插入多行

文章推荐： c++ - Linux C++ : "Holes" in time sampling

文章推荐： spring - HttpSessionListener 实现内部的依赖注入(inject)

java - 无法 Autowiring
我通过 spring ioc 编写了一些 Rest 应用程序。但我无法解决这个问题。这是我的异常(exception): org.springframework.beans.factory.BeanC
java - 无法@Autowire配置
我对 TestNG、Spring 框架等完全陌生，我正在尝试使用注释 @Value通过 @Configuration 访问配置文件注释。我在这里想要实现的目标是让控制台从配置文件中写出“hi”，通过
无法 malloc 然后转到程序顶部
为此工作了几个小时。我完全被难住了。这是 CS113 的实验室。如果用户在程序(二进制计算器)结束时选择继续，我们需要使用 goto 语句来到达程序的顶部。但是，我们还需要释放所有分配的内存。
无法 avformat_open_input .mp3
我正在尝试使用 ffmpeg 库构建一个小的 C 程序。但是我什至无法使用 avformat_open_input() 打开音频文件设置检查错误代码的函数后，我得到以下输出: Error code:
java - 无法 Autowiring
使用 Spring Initializer 创建一个简单的 Spring boot。我只在可用选项下选择 DevTools。创建项目后，无需对其进行任何更改，即可正常运行程序。现在，当我尝试在项目
macos - 无法 brew 链接qt
所以我只是在 Mac OS X 中通过 brew 安装了 qt。但是它无法链接它。当我尝试运行 brew link qt 或 brew link --overwrite qt 我得到以下信息: ton
git - 无法 pull 或提交
我在提交和 pull 时遇到了问题:在提交的 IDE 中，我看到: warning not all local changes may be shown due to an error: unable
gcc - 无法 grep 特定格式的文本
我跑 man gcc | grep "-L" 我明白了 Usage: grep [OPTION]... PATTERN [FILE]... Try `grep --help' for more inf
curl - 无法 CURL 远程文件
我有一段代码，旨在接收任何 URL 并将其从网络上撕下来。到目前为止，它运行良好，直到有人给了它这个 URL: http://www.aspensurgical.com/static/images/a
WireGuard - 无法 ping 服务器或解析域
在过去的 5 个小时里，我一直在尝试在我的服务器上设置 WireGuard，但在完成所有设置后，我无法 ping IP 或解析域。下面是服务器配置 [Interface] Address = 10.
GitLab:无法 fork 我自己的项目
我正在尝试在 GitLab 中 fork 我的一个私有(private)项目，但是当我按下 fork 按钮时，我会收到以下信息: No available namespaces to fork the
javascript - 无法 GET/定义路由
我这里遇到了一些问题。我是 node.js 和 Rest API 的新手，但我正在尝试自学。我制作了 REST API，使用 MongoDB 与我的数据库进行通信，我使用 Postman 来测试我的路
javascript - 无法 AppendChild - 尝试使一个方法在不同的类中附加另一个方法
下面的代码在控制台中给出以下消息: Uncaught DOMException: Failed to execute 'appendChild' on 'Node': The new child el
javascript - 数组被视为对象，无法 NgFor
我正在尝试调用一个新端点来显示数据，我意识到在上一组有效的数据中，它在数据周围用一对额外的“[]”括号进行控制台，我认为这就是问题是，而新端点不会以我使用数据的方式产生它! 这是 NgFor 失败的原
git - 无法 checkout 到无效路径
我正在尝试将我的 Symfony2 应用程序部署到我的 Azure Web 应用程序，但遇到了一些麻烦。推送到远程时，我在终端中收到以下消息 remote: Updating branch 'mas
docker - Minikube具有IP-无法 curl
Minikube已启动并正在运行，没有任何错误，但是我无法 curl IP。我在这里遵循:https://docs.traefik.io/user-guide/kubernetes/，似乎没有提到关闭
linux - 无法 docker 组成任何项目
每当我尝试docker组成任何项目时，都会出现以下错误。我尝试过有和没有sudo 我在这台机器上只有这个问题。我可以在Mac和Amazon WorkSpace上运行相同的容器。 (myslabs)
python - 无法 pip 安装手电筒
我正在尝试 pip install stanza 并收到此消息: ERROR: No matching distribution found for torch>=1.3.0 (from stanza
kubernetes 无法 ping 通其他服务
DNS 解析看起来不错，但我无法 ping 我的服务。可能是什么原因？来自集群中的另一个 Pod: $ ping backend PING backend.default.svc.cluster.l
spring - 无法 Autowiring 字段
我正在使用Hibernate 4 + Spring MVC 4当我开始 Apache Tomcat Server 8我收到此错误: Error creating bean with name 'wel

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Jquery 父级无法正常工作