使用 Javascript if 函数显示 SweetAlert 弹出窗口答案

【问题标题】：Use Javascript if function to display a SweetAlert popup使用 Javascript if 函数显示 SweetAlert 弹出窗口
【发布时间】：2019-03-13 13:05:11
【问题描述】：

如果上传当前被关闭，我想显示一个SweetAlert 弹出窗口，这是由具有“上传关闭”类的li 元素设置的

如果存在 <li> 时，我如何合并 if Javascript 条件来显示弹出窗口，并且如果“上传-on”类不执行任何操作

我打算以后在页面上使用 Vue，所以最好需要使用 Javascript 而不是 jQuery（因为我这里可能与 Vue 和 jQuery 发生冲突）

<!-- There are two classes which toggle, upload-off and upload-on-->
<li class="uploadli upload-off">
    <p>Upload Off</p>
</li>

<input value="" id="myuploadbutton" type="file" name="Uploader" placeholder="Upload here">

<!-- Sweetalert Popup - Only display popup if uploads are currently disabled



function upload_check() {
swal({
    text: "Uploads are currently disabled, please apply here at http://www.example.com/apply",
    icon: "error",
    buttons: ['Apply Now'],
    dangerMode: true
    })
    .then(function(value) {
    console.log('returned value:', value);
    });
}

-->

概述：用户单击上传按钮，如果 <li> 元素上存在“上传关闭”类，我们会收到一个 SweetAlert 弹出窗口

这是一个类似的 SweetAlert 问题

How to show SweetAlert in JavaScript

【问题讨论】：

所以看看元素是否存在，如果不存在则调用它....看起来很奇怪你不禁用它...
SweetAlert 正在显示我正在努力解决的信息
我的回答有帮助吗？

标签： javascript html sweetalert sweetalert2

【解决方案1】：

所以检查元素是否存在

document.querySelector("#myuploadbutton")
  .addEventListener('click', function(evt) {
    var li = document.querySelector('li.uploadli.upload-off');
    if (li) {
      evt.preventDefault()
      swal({
        text: "Uploads are currently disabled, please apply here at http://www.example.com/apply",
        icon: "error",
        buttons: ['cancel', 'Apply Now'],
        dangerMode: true
      }).then(function(value) {
        console.log('returned value:', value);
        if (value) {
          // window.location.href = "//www.example.com/apply"
        }
      });
    }
  })

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<ul>
  <li class="uploadli upload-off">
    <p>Upload Off</p>
  </li>
</ul>

<input value="" id="myuploadbutton" type="file" name="Uploader" placeholder="Upload here">

【讨论】：

【解决方案2】：

试试这个，在click事件中添加upload-off的if条件。

删除行 event.returnValue = true; 如果您不想在上传时执行任何操作

$("input[type=file]").on('click', function(event) {
  if (document.querySelector('li.uploadli.upload-off')) {
    swal({
        text: "Uploads are currently disabled, please apply here at http://www.example.com/apply",
        icon: "error",
        buttons: ['Apply Now'],
        dangerMode: true
      })
      .then(function(value) {
        console.log('returned value:', value);
      });
    event.preventDefault();
    //do something
  } else if (document.querySelector('li.uploadli.upload-on')) {
    swal({
        text: "Uploads are currently disabled, please apply here at http://www.example.com/apply",
        icon: "error",
        buttons: ['Apply Now'],
        dangerMode: true
      })
      .then(function(value) {
        console.log('returned value:', value);
      });
    event.returnValue = true; //delete if you want to do nothing on upload-on
    //   alert("nothing is done");

  } else {
    alert("nothing");
  }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<li class="uploadli upload-off">
  <p>Upload Off</p>
</li>

<input value="" id="myuploadbutton" type="file" name="Uploader" placeholder="Upload here">

【讨论】：