一个JavaScript确认所有foreach循环集合项的删除函数

Question

我的PHP代码包含一个foreach循环，它从集合（称为引用）创建数组（称为引号）。每个引号都包含一个带有id的删除按钮，然后将其作为参数提供给确认删除JavaScript函数。

挑战在于第一个引号具有指定的id，因此JavaScript函数可以正常工作。但是，对于之后的引用，没有指定的ID，因此在单击删除按钮时没有确认提示会立即删除它们。

我尝试使用getElementsByClassName改变它，但是没有用。

以下是创建变量的foreach循环的快照：

@foreach($quotations as $quotation) 

<article style="padding-bottom: 30px">

<div class="body w3-container">Service Request: - {{ $quotation->service_requests->service_name }}</div>

<h5>

<p><strong>Days to complete service: </strong>{{ $quotation->days_to_complete }}<br><strong>Fees to be charged for service (KES): {{ $quotation->fees_for_service }}</strong> <br><strong>Additional terms: </strong>{{ $quotation->additional_terms }}</p>

<a href='service_requests/{{ $quotation->service_request_id }}/quotations/{{ $quotation->id }}/edit' class="pure-button button-xsmall" id="smallLinkButton" style="background-color: #478dff; color: #ffffff;">Edit Quotation</a>

{{ Form::model($quotation, ["route" => ["service_requests.quotations.destroy", $quotation->service_requests->id, $quotation->id], "method" => "delete"]) }}

{{ Form::button("Delete Quotation!",["type"=> "submit", "class" => "pure-button button-xsmall", "id" => "revDel", "style"=>"background-color: #ff4747; color: #ffffff"]) }}

{{ Form::close() }}

</h5>

</article>

@endforeach

以下是确认已删除JavaScript功能的快照：

<script>

document.getElementById("revDel").onclick = function(f) {my2ndFunction(f)};

function my2ndFunction(f) {

if (confirm("Confirm delete!")) {

}

else {

f.preventDefault();
}

}

</script>

以下是变量在我的视图

上的显示方式的快照

如何更改JavaScript函数或foreach循环（或任何需要更改的内容），以便为每个列出的引号获取确认删除提示，而不仅仅是第一个？

Answer 1

您已为所有按钮指定了相同的ID。 id应该是唯一的。 DOM只会识别第一个。要么为它们提供所有名称属性，要使用getElementsByName方法获取按钮对象的列表，并通过节点列表进行迭代并设置onclick或执行此操作。

{{ Form::button("Delete Quotation!",["type"=> "submit", "class" => "pure-button button-xsmall", "onclick" => "my2ndFunction(event)", "style"=>"background-color: #ff4747; color: #ffffff"]) }}

确保删除此行

document.getElementById("revDel").onclick = function(f) {my2ndFunction(f)};