[英]Using javascript function on foreach loop in laravel blade
[英]How to create javascript function in laravel foreach loop
我需要有关此代码的一些帮助
我在刀片视图中有一些代码
@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
字段中的预期值必须不同。 但是,它全部获取数据库中最后一列的值。
我该如何解决?
以下是使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.