Javascript 用于在Laravel应用程序中删除警报的sweetalert

我试图使用

sweetalert

发出删除警报，但每当我从sweetalert确认

delete

时，表的第一行总是被删除。例如，即使我尝试删除表中的第三行，sweetalert也会删除第一行

如何更正代码

<tbody>
        @foreach($album_names as $album)
        <tr>
          <td>{{ $album->album_name }}</td>
          <td>
             {!! Form::open(['route' => ['album.destroy',$album->id], 'method' => 'delete','id'=>'delete_form']) !!}
            <button class="btn btn-danger" id="delete">Delete</button>
            <script type="text/javascript">
                  $('button#delete').on('click', function(e){
                        e.preventDefault();
                        swal({
                          title             : "Are you sure?",
                          text              : "You will not be able to recover this Album!",
                          type              : "warning",
                          showCancelButton  : true,
                          confirmButtonColor: "#DD6B55",
                          confirmButtonText : "Yes, delete it!",
                          cancelButtonText  : "No, Cancel delete!",
                          closeOnConfirm    : false,
                          closeOnCancel     : false
                        },
                  function(isConfirm){
                    if(isConfirm){
                      swal("Deleted!","your album has been deleted", "success");
                      setTimeout(function() {
                        $("#delete_form").submit();
                      }, 2000); // 1 second delay
                    }
                    else{
                      swal("cancelled","Your album is safe", "error");
                    }
                  }
            );});
            </script>
              {!! Form::close() !!}
            </td>
        </tr>
        @endforeach
    </tbody>

@foreach（$album_名称为$album）
{{$album->album_name}
{！！Form:：open（['route'=>['album.destroy'，$album->id]，'method'=>'delete'，'id'=>'delete_Form']）
删除
$（'button#delete'）。在（'click'，函数（e）{
e、 预防默认值（）；
游泳({
标题：“你确定吗？”，
文字：“您将无法恢复此相册！”，
键入：“警告”，
showCancelButton:true，
confirmButtonColor:#DD6B55“，
confirmButtonText：“是的，删除它！”，
cancelButtonText:“否，取消删除！”，
CloseOnConfig:false，
closeOnCancel:错误
},
功能（isConfirm）{
如果（我确认）{
swal（“删除！”，“您的相册已删除”，“成功”）；
setTimeout（函数（）{
$（“#删除表格”）.submit（）；
}，2000）；//延迟1秒
}
否则{
swal（“取消”、“您的相册安全”、“错误”）；
}
}
);});
{！！Form:：close（）！！}
@endforeach

问题在于，您在一个循环中生成所有这些。每个删除按钮的ID为“#delete”，每个表单的ID为“#delete_form”，但有许多按钮和表单，每个按钮和表单的ID相同

您没有限定选择器的范围以知道实际提交哪个表单。将ID切换到类，并确保根据单击的按钮选择表单

例如，您的代码可以更改为以下内容：

@foreach($album_names as $album)
    <tr>
      <td>{{ $album->album_name }}</td>
      <td>
         {!! Form::open(['route' => ['album.destroy',$album->id], 'method' => 'delete','class'=>'delete_form']) !!}
        <button class="btn btn-danger delete-btn">Delete</button>
          {!! Form::close() !!}
        </td>
    </tr>
@endforeach
<script type="text/javascript">
    $('button.delete-btn').on('click', function(e){
        e.preventDefault();
        var self = $(this);
        swal({
            title             : "Are you sure?",
            text              : "You will not be able to recover this Album!",
            type              : "warning",
            showCancelButton  : true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText : "Yes, delete it!",
            cancelButtonText  : "No, Cancel delete!",
            closeOnConfirm    : false,
            closeOnCancel     : false
        },
        function(isConfirm){
            if(isConfirm){
                swal("Deleted!","your album has been deleted", "success");
                setTimeout(function() {
                    self.parents(".delete_form").submit();
                }, 2000); //2 second delay (2000 milliseconds = 2 seconds)
            }
            else{
                  swal("cancelled","Your album is safe", "error");
            }
        });
    });
</script>

@foreach（$album\u名称为$album）
{{$album->album_name}
{！！Form:：open（['route'=>['album.destroy'，$album->id]，'method'=>'delete'，'class'=>'delete_Form']）
删除
{！！Form:：close（）！！}
@endforeach
$（'button.delete btn'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var self=$（这是）；
游泳({
标题：“你确定吗？”，
文字：“您将无法恢复此相册！”，
键入：“警告”，
showCancelButton:true，
confirmButtonColor:#DD6B55“，
confirmButtonText：“是的，删除它！”，
cancelButtonText:“否，取消删除！”，
CloseOnConfig:false，
closeOnCancel:错误
},
功能（isConfirm）{
如果（我确认）{
swal（“删除！”，“您的相册已删除”，“成功”）；
setTimeout（函数（）{
self.parents（“.delete_form”）.submit（）；
}，2000）；//2秒延迟（2000毫秒=2秒）
}
否则{
swal（“取消”、“您的相册安全”、“错误”）；
}
});
});

---

这是未经测试的，但它应该可以帮助您开始。让我知道这是否有帮助。

问题是，您在一个循环中生成所有这些。每个删除按钮的ID为“#delete”，每个表单的ID为“#delete_form”，但有许多按钮和表单，每个按钮和表单的ID相同

您没有限定选择器的范围以知道实际提交哪个表单。将ID切换到类，并确保根据单击的按钮选择表单

例如，您的代码可以更改为以下内容：

@foreach($album_names as $album)
    <tr>
      <td>{{ $album->album_name }}</td>
      <td>
         {!! Form::open(['route' => ['album.destroy',$album->id], 'method' => 'delete','class'=>'delete_form']) !!}
        <button class="btn btn-danger delete-btn">Delete</button>
          {!! Form::close() !!}
        </td>
    </tr>
@endforeach
<script type="text/javascript">
    $('button.delete-btn').on('click', function(e){
        e.preventDefault();
        var self = $(this);
        swal({
            title             : "Are you sure?",
            text              : "You will not be able to recover this Album!",
            type              : "warning",
            showCancelButton  : true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText : "Yes, delete it!",
            cancelButtonText  : "No, Cancel delete!",
            closeOnConfirm    : false,
            closeOnCancel     : false
        },
        function(isConfirm){
            if(isConfirm){
                swal("Deleted!","your album has been deleted", "success");
                setTimeout(function() {
                    self.parents(".delete_form").submit();
                }, 2000); //2 second delay (2000 milliseconds = 2 seconds)
            }
            else{
                  swal("cancelled","Your album is safe", "error");
            }
        });
    });
</script>

@foreach（$album\u名称为$album）
{{$album->album_name}
{！！Form:：open（['route'=>['album.destroy'，$album->id]，'method'=>'delete'，'class'=>'delete_Form']）
删除
{！！Form:：close（）！！}
@endforeach
$（'button.delete btn'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var self=$（这是）；
游泳({
标题：“你确定吗？”，
文字：“您将无法恢复此相册！”，
键入：“警告”，
showCancelButton:true，
confirmButtonColor:#DD6B55“，
confirmButtonText：“是的，删除它！”，
cancelButtonText:“否，取消删除！”，
CloseOnConfig:false，
closeOnCancel:错误
},
功能（isConfirm）{
如果（我确认）{
swal（“删除！”，“您的相册已删除”，“成功”）；
setTimeout（函数（）{
self.parents（“.delete_form”）.submit（）；
}，2000）；//2秒延迟（2000毫秒=2秒）
}
否则{
swal（“取消”、“您的相册安全”、“错误”）；
}
});
});

---

这是未经测试的，但它应该可以帮助您开始。如果有帮助，请告诉我。

$（“#删除表格”）.submit（）

是删除表单元素的内容，而不是sweetalert。表单函数很可能是罪魁祸首，而您没有提供该表单的功能性HTML或JS。事实上，问题是您在一个循环中生成了所有这些。每个删除按钮的ID为“#delete”，每个表单的ID为“#delete_form”，但有许多按钮和f