如何在 laravel foreach 循环中创建 javascript 函数

Question

我需要一些有关此代码的帮助

我在 blade 视图

中有一些代码

@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() 和 classes 来定位元素和数据属性（如 data-target="myForm1"）的方法，以便在事件处理程序中使用特定于元素的数据。

它目前正在为 "Edit" 和 "Cancel" 按钮工作，它们具有相同的 class popup-toggle 以及其他现有的 classes。

您可以将此方法用作其他方法的模板elements/actions

// 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>

如何在 laravel foreach 循环中创建 javascript 函数

How to create javascript function in laravel foreach loop

javascript

php

laravel-5.8