点击回复按钮后如何获取textarea内容？答案

【问题标题】：How to get textarea content after clicking on its reply button?点击回复按钮后如何获取textarea内容？
【发布时间】：2022-01-20 15:51:57
【问题描述】：

我正在尝试使用 jquery 来获取活动文本区域的输入。这是代码。

<!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>
       .commentReply{ display: none;}
    </style>
</head>
<body>
    

    <div class="comment-wrapper">
        <div class="reply p-2">
            <button type="button" class="btn btn-primary btn-reply">
                Reply
            </button>
        </div>
        <div class="commentReply" data-id="">
            <div class="post-reply-wrapper">
                <div class="textarea-wrapper">
                    <textarea class="textareReply" id="textarea-reply"></textarea>
                </div>
                <div>
                    <span class="post-reply">
                        <button class="btn-send-reply" id="btn-send-reply" data-id="1">Submit</button>
                    </span>
                    <span class="post-reply">
                        <button class="btn-cancel-reply">Cancel</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="comment-wrapper">
        <div class="reply p-2">
            <button type="button" class="btn btn-primary btn-reply">
                Reply
            </button>
        </div>
        <div class="commentReply" data-id="">
            <div class="post-reply-wrapper">
                <div class="textarea-wrapper">
                    <textarea class="textareReply" id="textarea-reply"></textarea>
                </div>
                <div>
                    <span class="post-reply">
                        <button class="btn-send-reply" id="btn-send-reply" data-id="2">Submit</button>
                    </span>
                    <span class="post-reply">
                        <button class="btn-cancel-reply">Cancel</button>
                    </span>
                </div>
            </div>
        </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

    <script>
        $(document).ready(function(){
            $('.btn-reply').on('click',function(){
                var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
                $('.commentReply').not(closestDiv.next('.commentReply')).hide();
                closestDiv.next('.commentReply').slideToggle(0);
            });
        });
    </script>
</body>
</html>

点击回复按钮后，将显示其旁边的文本区域。
我虽然，因为点击回复按钮后只有一个文本区域处于活动状态，所以执行以下操作可能会起作用

$(document).ready(function(){
    $('.btn-send-reply').on('click',function(){
        var text = $('textarea#textareReply').val();
        alert(text);
    });
});

但它没有。

如何通过单击其 Submit 按钮来获取该特定文本区域的值，其中 class 和 id 的值为 btn-send-reply ？
第一次点击回复按钮会显示下一个文本区域。并在下次隐藏该文本区域时单击回复按钮。我在这里的关注点和第一个有点相似。如何通过单击取消按钮来关闭扩展的文本区域？

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

使用最接近您可以从单击的元素中获得最接近的元素。

使用 prevAll，您将获得具有特定类名的上一个元素。

https://api.jquery.com/prevall/

$(document).ready(function(){
    $('.btn-reply').on('click',function(){
      var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
      $('.commentReply').not(closestDiv.next('.commentReply')).hide();
      closestDiv.next('.commentReply').slideToggle(0);
    });
    
    $('.btn-send-reply').on('click',function(){
      var textareaVal = $(this).closest('div').prevAll('.textarea-wrapper').find('textarea').val();  
      console.clear();
      console.log(textareaVal);
    });
    
    $('.btn-cancel-reply').on('click',function(){
      var closestDiv = $(this).closest('div').prevAll('.commentReply');
      $('.commentReply').not(closestDiv.next('.commentReply')).hide();
      closestDiv.next('.commentReply').slideToggle(0);
    });
});

.commentReply{ display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">


    <div class="comment-wrapper">
        <div class="reply p-2">
            <button type="button" class="btn btn-primary btn-reply">
                Reply
            </button>
        </div>
        <div class="commentReply" data-id="">
            <div class="post-reply-wrapper">
                <div class="textarea-wrapper">
                    <textarea class="textareReply" id="textarea-reply"></textarea>
                </div>
                <div>
                    <span class="post-reply">
                        <button class="btn-send-reply" id="btn-send-reply" data-id="1">Submit</button>
                    </span>
                    <span class="post-reply">
                        <button class="btn-cancel-reply">Cancel</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="comment-wrapper">
        <div class="reply p-2">
            <button type="button" class="btn btn-primary btn-reply">
                Reply
            </button>
        </div>
        <div class="commentReply" data-id="">
            <div class="post-reply-wrapper">
                <div class="textarea-wrapper">
                    <textarea class="textareReply" id="textarea-reply"></textarea>
                </div>
                <div>
                    <span class="post-reply">
                        <button class="btn-send-reply" id="btn-send-reply" data-id="2">Submit</button>
                    </span>
                    <span class="post-reply">
                        <button class="btn-cancel-reply">Cancel</button>
                    </span>
                </div>
            </div>
        </div>
    </div>

【讨论】：