如果上传当前已关闭,我想显示一个SweetAlert弹出窗口,这是由具有“上传关闭”类的li
元素设置的
我如何合并if javascript条件来显示弹出窗口,如果<li>
存在“upload-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>
元素上有“upload-off”类,我们会得到一个SweetAlert弹出窗口
这是一个类似的SweetAlert问题
因此,请检查元素是否存在
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">
试试这个,在upload-off
事件中添加click
的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">