JQuery实现评论发布功能

Shaw Jie�
于 2022-10-12 09:36:32 发布
阅读量425
点赞数 1
文章标签： jquery html javascript
本文链接：https://blog.csdn.net/Shaw_Jie/article/details/127276255
版权
直接上代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      body::-webkit-scrollbar {
        width: 0;
      }
      .main {
        width: 1000px;
        margin: 0 auto;
        border: 1px solid #000;
        padding: 20px;
        overflow: hidden;
      }
      #comment {
        width: 100%;
        height: 160px;
        resize: none;
      }
      .tip {
        font-size: 18px;
        font-weight: bold;
      }
      #send {
        padding: 5px 50px;
        float: right;
      }
      .mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: none;
      }
      #edit_comment {
        width: 100%;
        height: 100px;
        resize: none;
      }
      .group_wrap {
        width: 400px;
        height: 150px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
      #update_btn {
        padding: 5px 20px;
      }
      .comment_box {
        width: 1000px;
        margin: 20px auto;
        padding: 20px;
        border: 1px solid #000;
      }
      .comment_box .msg {
        width: 100%;
        display: flex;
        justify-content: space-between;
        background: #ccc;
        margin: 20px auto;
        padding: 20px;
        box-sizing: border-box;
      }
    </style>
    <script src="jquery-3.6.1.js"></script>
  </head>
  <body>
    <div class="main">
      <h2>发部评论</h2>
      <textarea id="comment" maxlength="20"></textarea>
      <div>还可以输入 <span class="tip">20</span> 个字</div>
      <button id="send" disabled>发送</button>
      <div class="mask">
        <div class="group_wrap">
          <textarea id="edit_comment"></textarea>
          <button id="update_btn">保存修改</button>
        </div>
      </div>
    </div>
    <!-- 评论区 -->
    <div class="comment_box">
      <div class="msg">
        <p>1111</p>
        <div>
          <button class="edit_btn">编辑</button>
          <button class="del_btn">删除</button>
        </div>
      </div>
    </div>
    <script>
      // 编辑评论的input监听事件
      $("#comment").on("input", function () {
        // 控制输入监听
        $(".tip").text(20 - $(this).val().trim().length);

        // 判断输入长度，控制发送按钮是否被禁用
        if ($(this).val().trim().length > 0) {
          $("#send").removeAttr("disabled");
        } else {
          $("#send").attr("disabled", "true");
        }
      });

      // 发送按钮点击后，把输入的值追加进评论区的最后面
      $("#send").click(function () {
        // 把输入的文本发送出去
        $(".comment_box").prepend(`<div class="msg">
        <p>${$("#comment").val()}</p>
        <div>
          <button class="edit_btn">编辑</button>
          <button class="del_btn">删除</button>
        </div>
      </div>`);

        // 根据评论条数，控制评论区的显示与隐藏
        if ($(".comment_box").children().length == 0) {
          $(".comment_box").css("display", "none");
        } else {
          $(".comment_box").css("display", "block");
        }

        // 发送点击后清空输入
        $("#comment").val("");
        // 禁用发送
        $("#send").attr("disabled", "true");
        // 发送后提示字体重置
        $(".tip").text(20 - $("#comment").val().trim().length);

        // 删除评论
        $(".del_btn").click(function () {
          $(this).parents().remove(".msg");

          if ($(".comment_box").children().length == 0) {
            $(".comment_box").css("display", "none");
          } else {
            $(".comment_box").css("display", "block");
          }
        });

        // 编辑评论
        $(".edit_btn").click(function () {
          // 编辑点击后蒙版显示
          $(".mask").css("display", "block");

          // 设置蒙版中输入框的val为，触发者的文本
          $("#edit_comment").val($(this).parent().siblings("p").text());

          // 把当前编辑按钮的jQuery赋值给一个变量
          var currentElement = $(this).parent("div").siblings("p");

          console.log(currentElement);
          // 保存修改点击事件
          $("#update_btn").click(function () {
            // 设置修改的val为，蒙版输入框修改后的值
            currentElement.text($("#edit_comment").val());

            $(this).off("click");
            // 隐藏模板
            $(".mask").css("display", "none");
          });
        });
      });
    </script>
  </body>
</html>