如何在jquery中添加甜蜜警报确认

Question

晚上好!我是一个开发JS的初学者，我尝试了几次在试图删除项目时向用户确认(甜蜜警报)。

我使用任何事件触发警报?

这是我的Html代码:

     <!-- sweet alerts Css-->
          <link href="{{ asset('template/assets/sweet-alert/sweet-alert.min.css') }}" rel="stylesheet">
    <!-- sweet alert JS-->
        <script src="{{ asset('template/assets/sweet-alert/sweet-alert.min.js') }}"></script>
        <script src="{{ asset('template/assets/sweet-alert/sweet-alert.init.js') }}"></script>
<!-- form--->
     <form id="deleteAll" method="post" action="{{ path('projets_deleteAll') }}" 
    <!--checkAll --->
     <input type="checkbox" id="checkAll"/>
     {% for entity in entities %}
        <input type="checkbox" id="d" name="check[]" value="{{ entity.id}}"/>
    {% endfor %}
     <strong >
     <button type="submit" class="btn btn-lg btn-danger" id="bn"  >
           <i class="fa fa-trash" ></i> Delete</button>
     </strong>
    </form> 
<!-- ./form--->

Jquery代码。

$(document).ready(function(){
        $("#checkAll").click(function(){
            var checked_status = this.checked;
            $("input[name='check[]']").each(function(){
                this.checked = checked_status;
                var v = $("#d").val();
                $('#bn').trigger('submit', function (e){
                    e.preventDefault();
                    actiondesubsitution();
                });
        });
    });
        if(v.length>0){
            document.querySelector('#d').onclick = function(){
                swal({
                            title: "Are you sure?",
                            text: "You will not be able to recover this imaginary file!",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonColor: '#DD6B55',
                            confirmButtonText: 'Yes, delete it!',
                            closeOnConfirm: false
                        },
                        function(){
                            swal("Deleted!", "Your imaginary file has been deleted!", "success");
                        });
            };
        }
        else{
            new SweetAlertDialog(this, SweetAlertDialog.ERROR_TYPE)
                    .setTitleText("Oops...")
                    .setContentText("No selection for deleting !")
                    .show();
        }
    });

在"if"处警报不起作用的问题

错误是:

VM1631:187 Uncaught DOMException: Failed to execute 'querySelector' on'Document': '[objecthtmldocument]'不是一个有效的选择器。at Error (native)在CommandLineAPIImpl。$ (& lt; anonymous>187:84):在& lt; anonymous> 1:1CommandLineAPIImpl。$ @ VM1631:187(匿名函数)@ VM1633:1 javascript:console.log (v.length);VM1634:1 Uncaught ReferenceError: v is not定义at :1:25(匿名功能)@ VM1634:1

感谢您帮助我整合这个警报。

Answer 1

我假设您包含<script src="dist/sweetalert.min.js"></script>和<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">标签，如果您这样做了，您所要做的就是将第二个代码放入链接到事件的函数中，就像您可以看到的那样，如果您按下演示页面上的F12并检查脚本标签上的代码:

document.querySelector('ul.examples li.warning.confirm button').onclick = function(){
   swal({
      title: "Are you sure?",
      text: "You will not be able to recover this imaginary file!",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: '#DD6B55',
      confirmButtonText: 'Yes, delete it!',
      closeOnConfirm: false
   },
   function(){
      swal("Deleted!", "Your imaginary file has been deleted!", "success");
   });
};

试题:

$(document).on("click", "#bn", function(){
   swal({
      title: "Are you sure?",
      text: "You will not be able to recover this imaginary file!",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: '#DD6B55',
      confirmButtonText: 'Yes, delete it!',
      closeOnConfirm: false
   },
   function(){
      swal("Deleted!", "Your imaginary file has been deleted!", "success");
   });
});

我不能测试它，但这将显示您的消息…但我不确定它将如何链接删除元素的功能…

代码应该是这样的:

$(document).on("click", "#bn", function(){
  if(v.length>0){
    swal({
      title: "Are you sure?",
      text: "You will not be able to recover this imaginary file!",
      type: "warning",
      showCancelButton: true,
      confirmButtonColor: '#DD6B55',
      confirmButtonText: 'Yes, delete it!',
      closeOnConfirm: false
    },
    function(){
      swal("Deleted!", "Your imaginary file has been deleted!", "success");
    });
   }
   else{
        new SweetAlertDialog(this, SweetAlertDialog.ERROR_TYPE)
                .setTitleText("Oops...")
                .setContentText("No selection for deleting !")
                .show();
    }
});

吗?

条件应该在事件内部评估，因为在这一点上，你的v应该有值…