拉拉维尔 |相同的按钮具有不同的功能

Question

我有两个可以打开模式的按钮，但我不知道如何区分它们以打开正确的模式。 这是一个接受按钮和一个拒绝按钮。

<a id='aceitar' href="{{route('despesas.modal', $item)}}">
  <i class="fas fa-check text-info mr-1"></i>
</a>
<a href="{{route('despesas.modal2', $item)}}">
  <i class="fas fa-ban text-danger mr-1"></i>
</a>

模态接受

<?php 
  if (@$id != "") {
    echo "<script>$('#modalaceitar').modal('show');</script>";
  }
?>

模态拒绝

<?php 
  if (@$id != "") {
    echo "<script>$('#modalrejeita').modal('show');</script>";
  }
?>

我有什么方法可以区分它们吗？因为两者都检查ID是否不同于空

if (@$id != "")

Answer 1

您可以使用data 属性来定位所需的模式。

<button class="open-modal" data-target="modal-a">Modal A</button>
<button class="open-modal" data-target="modal-b">Modal B</button>

<div id="modal-a" class="hidden">Modal A</div>
<div id="modal-b" class="hidden">Modal B</div>

上面应用的.hidden 类只是将css display 属性设置为none。

.hidden {
    display: none;
}

然后使用一些 JavaScript，您可以将 click event 处理程序应用于每个 button，方法是使用 querySelectAll 查找具有给定 class 名称的所有 button 元素，然后当 button 是单击，读取data-target 数据集和toggle（或remove）display 属性为modal。

let buttons = document.querySelectorAll('.open-modal');

buttons.forEach(button => {
    button.addEventListener('click', function (event) {
        document.getElementById(event.target.dataset.target).classList.toggle('hidden');
  });
});

Example JSFiddle here