如何在 laravel foreach 循環中創建 javascript function

Question

我需要有關此代碼的一些幫助

我在刀片視圖中有一些代碼

@foreach($cart as $ct)
<button type="button" id="edit{{$ct->id}}" class="btn-btn-delete">
        <i class="mr-1 fas fa-edit"></i>Edit
</button>
        //when I {{$ct->id}} at this point, it return id of current product         
<div class="form-popup" id="myForm{{$ct->id}}">
        //however, when I {{$ct->id}} at this point, it return id of the last product                      
    <form action="{{route('cart.update',$ct->id)}}" class="form-container" method="post">
            @csrf
            @method('patch')
           <h1>Edit information</h1>

           <input type="text" name="name" value="{{$ct->name}}">
          <button type="submit" class="btn">change</button>
          <button type="button" class="btn cancel" id="close{{$ct->id}}">Close</button>
     </form>
</div>

 <script>
     var ID = {{$ct->id}};
     var code = 'edit'+ID;
     var end = 'close'+ID;
     var form = 'myForm'+ID;
     document.getElementById(code).addEventListener("click",function(){
               document.getElementById(form).style.display = "block";
              });
     document.getElementById(end).addEventListener("click",function(){
               document.getElementById(form).style.display = "none";
              });
 </script>
@endforeach

當我運行我的代碼並單擊Edit按鈕時，每行input字段中的預期值必須不同。 但是，它全部獲取數據庫中最后一列的值。

我該如何解決？

Answer 1

以下是使用addEventListener()和類來定位元素以及數據屬性（如data-target="myForm1" ）的方法，以便在事件處理程序中使用元素特定數據。

它目前適用於具有相同 class popup-toggle以及其他現有類的“編輯”和“取消”按鈕。

您可以將此方法用作其他元素/操作的模板

 // in DOMContentLoaded event handler or after elements exist const popToggleButtons = document.querySelectorAll('.popup-toggle'); [].slice.call(popToggleButtons).forEach(function(btn) { btn.addEventListener('click', handleToggleBtnClick) }); function handleToggleBtnClick(event) { const btnData = this.dataset, popup = document.getElementById(btnData.target), classMethod = btnData.action === 'show'? 'add': 'remove'; // add or remove active class depending on which button was clicked popup.classList[classMethod]('active'); }

 .form-popup { display: none }.form-popup.active { display: block }

 <div> <button type="button" data-target="myForm1" data-action="show" class="popup-toggle btn-btn-delete"> <i class="mr-1 fas fa-edit"></i>Edit #1 </button> <div class="form-popup" id="myForm1"> <form action="..." class="form-container" method="post"> <h1>Edit information #1</h1> <input type="text" name="name" value="name 1"> <button type="submit" class="btn">change</button> <button type="button" class="btn cancel popup-toggle" data-target="myForm1" data-action="hide">Close</button> </form> </div> </div> <div> <button type="button" data-target="myForm2" data-action="show" class="popup-toggle"> <i class="mr-1 fas fa-edit"></i>Edit #2 </button> <div class="form-popup" id="myForm2"> <form action="..." class="form-container" method="post"> <h1>Edit information #2</h1> <input type="text" name="name" value="name 2"> <button type="submit" class="btn">change</button> <button type="button" class="btn cancel popup-toggle" data-target="myForm2" data-action="hide">Close</button> </form> </div> </div>