我不了解PHP，所以这可能是一个非常基本的问题。我事先表示歉意。
我正在一个包含产品列表的页面上，对于每个产品，都有一个删除它的选项。后端开发人员做到了，因此效果很好。但是，它们暂时不可用，客户端需要一种模式来与用户核对，以确定他们是否确定要在操作完成之前删除产品。
我包括一个模态。并将删除动作移至模式的“是”按钮。但是，由于我们列出了几种产品，因此它会不断重复按钮。我意识到这可能是一个基本的解决方法，但是我不知道自己在做什么。有人可以看看吗？谢谢！
以下是（已编辑-在此版本中，我将动作移至模态）代码：
<div class="container">
<div class="quotes">
<div class="col-md-12">
<div class="pages-header text-right">
<a href="{{route('product.create')}}" class="btn btn-success new-quote-button">New Product</a>
</div>
</div>
<div class="col-md-12">
<div class="card rounded-0 border-0 active-products">
<div class="card-header d-flex justify-content-between align-items-center">
<h3 class="mb-0">Products</h3>
</div>
<table class="table text-center" cellspacing="0">
<thead>
<tr>
<th scope="col" class="text-left quote-name">Name</th>
<th scope="col">Category</th>
<th scope="col">Hardware Price</th>
<th scope="col">Yearly License Cost</th>
<th scope="col">Monthly License Cost</th>
<th scope="col">Type</th>
<th scope="col" colspan="2"></th>
</tr>
</thead>
<tbody>
@foreach($products as $product)
<tr>
<th scope="col" class="quote-name">
{{$product->name}}
</th>
<th scope="col">
{{$product->category}}
</th>
<th scope="col">
{{$product->hardware_price}}
</th>
<th scope="col">
{{$product->yearly_license_cost}}
</th>
<th scope="col">
{{$product->monthly_license_cost}}
</th>
<th scope="col">
{{$product->type}}
</th>
<th scope="col" class="actions-col">
<a href="{{route('product.edit', $product->id)}}" class="text-primary">Edit</a>
</th>
<th scope="col" class="actions-col">
<a href="#" class="text-danger" data-toggle="modal" data-target="#deleteModal">Delete</a>
</th>
</tr>
@endforeach
</tbody>
</table>
{{ $products->links() }}
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
@foreach($products as $product)
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<form method="POST" action="{{route('product.destroy', $product)}}" id="delete-{{$product->id}}">
@csrf
@method('DELETE')
<a href="#" class="text-danger">Delete</a>
</form>
@endforeach
</div>
</div>
</div>
</div>
</div>
我该如何调整？
答案 0 :(得分：0)
您需要在删除按钮中使用传递数据属性，并使用js脚本附加为模式形式。
更改为HTML
length=32,bytes=0x864cd0d429a9fd41695b5958aj77ec57...0f9852475faab540}添加JS脚本
<a href="#" class="text-danger deleteproduct" data-id="{{$product->id}}" data-product="{{$product}}" data-toggle="modal" data-target="#deleteModal">Delete</a>
模式更改
$(document).on('click', '.deleteproduct', function(e) {
e.preventDefault();
var id = $(this).attr('data-id');
var product = $(this).attr('data-product');
$('#Deletefrm').attr('id','delete-'+id);
$('#Deletefrm').attr('action','/product.destroy/'+product);
});
$('#deleteModal').on('hidden.bs.modal', function(e) {
$('#Deletefrm').attr('id','');
$('#Deletefrm').attr('action','');
});
答案 1 :(得分：0)
<div class="container">
<div class="quotes">
<div class="col-md-12">
<div class="pages-header text-right">
<a href="{{route('product.create')}}" class="btn btn-success new-quote-button">New Product</a>
</div>
</div>
<div class="col-md-12">
<div class="card rounded-0 border-0 active-products">
<div class="card-header d-flex justify-content-between align-items-center">
<h3 class="mb-0">Products</h3>
</div>
<table class="table text-center" cellspacing="0">
<thead>
<tr>
<th scope="col" class="text-left quote-name">Name</th>
<th scope="col">Category</th>
<th scope="col">Hardware Price</th>
<th scope="col">Yearly License Cost</th>
<th scope="col">Monthly License Cost</th>
<th scope="col">Type</th>
<th scope="col" colspan="2"></th>
</tr>
</thead>
<tbody>
@foreach($products as $product)
<tr>
<td scope="col" class="quote-name">
{{$product->name}}
</td>
<td scope="col">
{{$product->category}}
</td>
<td scope="col">
{{$product->hardware_price}}
</td>
<td scope="col">
{{$product->yearly_license_cost}}
</td>
<td scope="col">
{{$product->monthly_license_cost}}
</td>
<td scope="col">
{{$product->type}}
</td>
<td scope="col" class="actions-col">
<a href="{{route('product.edit', $product->id)}}" class="text-primary">Edit</a>
</td>
<td scope="col" class="actions-col">
<a href="#" class="text-danger" data-toggle="modal" data-target="#deleteModal-{{$product->id}}">Delete</a>
</td>
<td>
<div class="modal fade" id="deleteModal-{{$product->id}}" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel-{{$product->id}}" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel-{{$product->id}}">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
@foreach($products as $product)
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
<form method="POST" action="{{route('product.destroy', $product)}}" id="delete-{{$product->id}}">
@csrf
@method('DELETE')
<a href="#" class="text-danger">Delete</a>
</form>
@endforeach
</div>
</div>
</div>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $products->links() }}
</div>
</div>
</div>
<!-- Modal -->
</div>