如何僅在單擊回復按鈕時顯示和隱藏回復表單

我正在嘗試在 Laravel 8 專案中向我的評論系統添加回復評論。我撰寫了一個腳本來在單擊回復按鈕時顯示回復表單，但默認情況下該表單始終處于顯示狀態。但是，當單擊回復按鈕時，表單將隱藏并在第二次單擊時顯示。我似乎沒有得到我沒有得到的東西。拜托，我需要你這方面的助手。這是我的代碼：

//The form    
<div class="card-body">
     @if ($PostDetails->comment)
         @foreach($PostDetails->comment as $comment)
             <blockquote class="blockquote">
             <p class="mb-0">{{ $comment->comment }}</p>
             <footer class="blockquote-footer">{{ $comment->user->name }}</footer>
             </blockquote>
             {{-- Reply Comment Section --}}
             <button id="reply-button" onclick="showReplyForm('{{$comment->id}}', '{{ $comment->user->name }}')" class="border-0 bg-transparent">Reply</button>
             <div class="row flex-row d-flex">
                  <form action="" method="post">
                       <div class="col-lg-12">
                            <textarea id="reply-form-{{$comment->id}}" cols="80" rows="2" class="form-control mb-10" name="replyMessage"></textarea>
                       </div>
                  </form>
              </div>
              <hr>
         @endforeach
       @endif
</div>

//The script is:
<script type="text/javascript">
    function showReplyForm(commentId){
        var x = document.getElementById(`reply-form-${commentId}`);
        if (x.style.display === "none") {
            x.style.display = "block";
        }else{
            x.style.display = "none";
        }
    }
</script>

uj5u.com熱心網友回復：

將id您的按鈕的屬性更改為并將 添加style="display:none"到您的textareas. 然后你可以將你的 JavaScript 部分簡化為

document.querySelectorAll(".reply-button").forEach(btn=>btn.onclick=ev=>{      
  const x=ev.target.nextElementSibling.querySelector("textarea");
  x.style.display = x.style.display ==="none"?"":"none";
});

這樣就不再需要將ids分配給各個 textareas 了。

uj5u.com熱心網友回復：

添加style="display:none;"以使其在開始時隱藏。

<div class="card-body">
     @if ($PostDetails->comment)
         @foreach($PostDetails->comment as $comment)
             <blockquote class="blockquote">
             <p class="mb-0">{{ $comment->comment }}</p>
             <footer class="blockquote-footer">{{ $comment->user->name }}</footer>
             </blockquote>
             {{-- Reply Comment Section --}}
             <button id="reply-button" onclick="showReplyForm('{{$comment->id}}', '{{ $comment->user->name }}')" class="border-0 bg-transparent">Reply</button>
             
             <div class="row flex-row d-flex" style="display:none">
                  <form action="" method="post">
                       <div class="col-lg-12">
                            <textarea id="reply-form-{{$comment->id}}" cols="80" rows="2" class="form-control mb-10" name="replyMessage"></textarea>
                       </div>
                  </form>
              </div>
              <hr>
         @endforeach
       @endif
</div>

//The script is:
<script type="text/javascript">
    function showReplyForm(commentId){
        var x = document.getElementById(`reply-form-${commentId}`);

        if (x.style.display === "none") {
            x.style.display = "block";
        }else{
            x.style.display = "none";
        }
        
    }
</script>

標籤：javascript 拉拉维尔

上一篇：GroupBy不顯示所有資料

下一篇：在Laravel下訂單時減少庫存數量