Javascript 如何使用甜蜜警报
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27835246/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To Use Sweet alert
提问by Mohammad
This Is My HTML Code I Have Two Input Button That I Want To Show Sweet Alert When a user Clicks on any Button
这是我的 HTML 代码我有两个输入按钮，当用户单击任何按钮时，我想显示甜蜜警报
<tr class="examples odd" id="UserId_1" role="row">
<td class="sorting_1">1</td>
<td>admin</td><td>Mohammad</td>
<td>Farzin</td><td class="warning"><input type="button"
value="Delete" class="sweet-5" id="btn_Delete1"></td>
</tr>
<tr class="examples even" id="UserId_5" role="row">
<td class="sorting_1">2</td>
<td>11</td><td>11</td>
<td>11</td><td class="warning"><input type="button" value="Delete" class="sweet-5"
id="btn_Delete5"></td>
</tr>
Script
脚本
$(document).ready(function () {
document.querySelector('td.warning input').onclick = function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: 'btn-danger',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted!", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
};
});
Only The First Input Button Shows Sweet Alert, but when I click the second button nothing happens
只有第一个输入按钮显示甜蜜警报，但是当我单击第二个按钮时没有任何反应
回答by Ervin
You were probably using SweetAlert version 2and your code applies to version 1. This should work:
您可能使用的是SweetAlert 版本 2，并且您的代码适用于版本 1。这应该可以工作：
swal({
title: 'Are you sure?',
text: 'Some text.',
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#DD6B55',
confirmButtonText: 'Yes!',
cancelButtonText: 'No.'
}).then(() => {
if (result.value) {
// handle Confirm button click
} else {
// result.dismiss can be 'cancel', 'overlay', 'esc' or 'timer'
}
});<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>Source: Migration from Swal1 to Swal2
资料来源： 从 Swal1 到 Swal2 的迁移
回答by Hoja.M.A
Try this
尝试这个
$(document).ready(function () {
$('body').on('click', 'td.warning input', function () {
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonClass: 'btn-danger',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
swal("Deleted!", "Your imaginary file has been deleted!", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
});
});
Check Fiddle
检查小提琴
回答by Richie
with sweet alert it is more easy for example i fave a link what i need is to call onclickfunction and make sure i included sweetalser.cssand sweetalert.min.jsi hope this will work for you
使用甜蜜警报更容易，例如我喜欢一个链接，我需要的是调用onclick函数并确保我包含了sweetalser.css，sweetalert.min.js我希望这对你有用
<a onclick="sweetAlert('Greetings', 'Hi', 'error');" class="" data-toggle="modal" href='#modale-id'><i class="fa fa-fw fa-plus"></i>Streams</a>
回答by Scholar Alliance
window.onload=function()
window.onload=function()
{
{
swal({ title: "PopOutTitle", text: "Your FIRST Name:", type: "input", showCancelButton: true, OnConfirm:school();
animation: "slide-from-top", inputPlaceholder: name }, function(inputValue){ if (inputValue === false) return false;
if (inputValue === "") { swal.showInputError("You need to write something!"); return false }
document.getElementById("name").innerHTML=inputValue || "Unknown";
});
}
function school(){
函数学校（）{
swal({ title: "PopOutTitle", text: "Your last Name:", type: "input", showCancelButton: true,
animation: "slide-from-top", inputPlaceholder: name }, function(inputValue){ if (inputValue === false) return false;
if (inputValue === "") { swal.showInputError("You need to write something!"); return false }
document.getElementById("name").innerHTML=inputValue || "Unknown";
});**I want to show multiple swal popout so I want to call the school function when Ok Button is clicked. How can I do this?**
回答by Adi
You are only selecting the first element that matches 'td.warning input'selector, that's why nothing happens to the second element.
您只选择与'td.warning input'选择器匹配的第一个元素，这就是为什么第二个元素没有任何反应。
Try querySelectorAll('td.warning input')method.
This returns an array and you can loop through the array to set Event Listeners.
尝试querySelectorAll('td.warning input')方法。这将返回一个数组，您可以遍历该数组以设置事件侦听器。
回答by Natvarsinh Parmar - bapu
If you want sweet alert on click of any button then change your code like below:
如果您想单击任何按钮时发出甜蜜警报，请更改您的代码，如下所示：
$(document).ready(function(){
$(document).on('click', 'button', function(){
Swal.fire({
type: 'success',
title: 'Your work has been done',
showConfirmButton: false,
timer: 1500
})
});
});
