如何創建一個回復按鈕，每次單擊一個按鈕時顯示

Question

我正在創建一個評論和回復系統，但我無法獲得回復按鈕來僅顯示評論的輸入字段。

單擊任何回復按鈕時，將顯示所有輸入字段，而不僅僅是單擊的一個

這是我的 javascript：

function reply() {

    var doc;
    doc=document.getElementsByClassName("sho") ; 
    
    for (var i = 0 ; i < doc.length; i++){
        doc[i].style.display="block ";
    
    }
} 

Answer 1

 $('.btn-reply').on("click", function () { var parent_dom = $(this).parent(); var _input_child_dom = $(parent_dom).children("input"); var find_allInput = $('.reply-container').find("input"); if(find_allInput.length > 0 ){ for (var i = 0; i < find_allInput.length; i++) { $(find_allInput[i]).css("display", "none"); } } $(_input_child_dom).css("display", "block"); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="reply-container"> <div class="reply"> <p>First reply</p> <button class="btn btn-primary btn-reply">reply</button> <input type="text" class="InputReply" style="display: none;"> </div> <br> <div class="reply"> <p>Second reply</p> <button class="btn btn-primary btn-reply">reply</button> <input type="text" class="InputReply" style="display: none;"> </div> <br> <div class="reply"> <p>Third reply</p> <button class="btn btn-primary btn-reply">reply</button> <input type="text" class="InputReply" style="display: none;"> </div> </div>

注意：這是您如何實現您的要求的想法。