如何创建一个回复按钮，每次单击一个按钮时显示

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>

注意：这是您如何实现您的要求的想法。