單擊其回復按鈕后如何獲取textarea內容？-有解無憂

我正在嘗試使用 jquery 來獲取活動 textarea 的輸入。這是代碼。

<!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 的按鈕來獲取該特定 textarea的值btn-send-reply？
第一次點擊回復按鈕顯示下一個文本區域。下次單擊回復按鈕隱藏該文本區域。我的關注點與第一個有點相似。如何通過單擊取消按鈕來關閉擴展的文本區域？

uj5u.com熱心網友回復：

通過最接近，您可以從單擊的元素中獲得最接近的元素。

使用 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/384227.html

標籤：javascript html 查询

上一篇：Jquery用換行符附加文本資料

下一篇：如何觸發表格選項卡中的鏈接？