sweetalert2未捕获的SyntaxError：意外的标识符
[英]sweetalert2 Uncaught SyntaxError: Unexpected identifier
问题描述
I would love to use SweetAlert2. 
我很想使用SweetAlert2。 But, I can't get it work... I read various posts on stackoverflow. 但是，我无法正常工作...我阅读了关于stackoverflow的各种文章。 But, I couldn't solve my problem.. 但是，我无法解决我的问题。
The sweetalert2 github page says that I can include the stylesheet separately if desired by adding sweetalert2 github页面说，如果需要，我可以通过添加来单独包括样式表
"sweetalert2/dist/sweetalert2.min.js" “sweetalert2 /距离/ sweetalert2.min.js”
& "sweetalert2/dist/sweetalert2.min.css". ＆“ sweetalert2 / dist / sweetalert2.min.css”。
Or, include "import Swal from 'sweetalert2'" 或者，包括“从'sweetalert2'导入Swal”
and "const Swal = require('sweetalert2')". 和“ const Swal = require（'sweetalert2'）”。
So, I took the first approach and got the following error messages: 因此，我采用了第一种方法并收到以下错误消息：
- GET file:///Users/HyejungLim/SaferTrip_JL/sweetalert2/dist/sweetalert2.min.js 0 () index.html:21 GET file：///Users/HyejungLim/SaferTrip_JL/sweetalert2/dist/sweetalert2.min.js 0（）index.html：21
- GET file:///Users/HyejungLim/SaferTrip_JL/sweetalert2/dist/sweetalert2.min.css 0 () index.html:22 GET file：///Users/HyejungLim/SaferTrip_JL/sweetalert2/dist/sweetalert2.min.css 0（）index.html：22
- GET file:///Users/HyejungLim/SaferTrip_JL/sweetalert2/dist/sweetalert2.all.min.js 0 () jquery.min.js:2 [Violation] 'setTimeout' handler took 120ms index.js:31 GET file：///Users/HyejungLim/SaferTrip_JL/sweetalert2/dist/sweetalert2.all.min.js 0（）jquery.min.js：2 [Violation]'setTimeout'处理程序花费了120ms index.js：31
Uncaught ReferenceError: swal is not defined
未捕获的ReferenceError：未定义swal - at HTMLDivElement. 在HTMLDivElement。 (index.js:31) （index.js：31）
- at HTMLDivElement.dispatch (jquery.min.js:2) 在HTMLDivElement.dispatch（jquery.min.js：2）
- at HTMLDivElement.y.handle (jquery.min.js:2) 在HTMLDivElement.y.handle（jquery.min.js：2）
- at HTMLDivElement.
You can see the last error message after clicking the green button and one of circles. 单击绿色按钮和一个圆圈后，您可以看到最后一条错误消息。
$(document).ready(function() { $('#test').click(function(){ $(".options:hidden").fadeIn() .on("click", function(){ $(this).css("background", "#F3C78D"); }) .on("click", function(){ swal({ title: 'Sweet!', text: 'Modal with a custom image.', imageUrl: 'https://unsplash.it/400/200', imageWidth: 400, imageHeight: 200, imageAlt: 'Custom image', animation: false }) }); }); });
body{ font-family: 'Poor Story', sans-serif; } #test{ cursor: pointer; display: block; text-align: center; position: absolute; display: flex; left: 50%; top: 50%; transform: translate(-50%, -50%); } .options { background: #f7f7f5; display: none; text-align: center; vertical-align: middle; position: absolute; width: 100%; left: 50%; top: 50%; border-radius: 50%; border-style: solid; border-color: #F3C78D; width: 60px; height: 60px; font-size: 12px; } .options span { color: #000000; text-align: center; vertical-align: middle; position: absolute; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); } #option1{ transform: translate(-100%, -150%); } #option2{ transform: translate(-160%, -40%); } #option3{ transform: translate(-50%, 50%); } #option4{ transform: translate(60%, -40%); } #option5{ transform: translate(15%, -150%); }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap 4.1.x --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet"> <!-- sweetalert2 --> <script src="sweetalert2/dist/sweetalert2.all.min.js"></script> <!-- You can also include the stylesheet separately if desired: --> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script> <link rel="stylesheet" href="sweetalert2/dist/sweetalert2.min.css"> </head> <body> <div class="container"> <button type="button" class="btn btn-outline-success" id="test">test</button> <div class="options" id="option1"><span>Hello<br>World</span></div> <div class="options" id="option2"><span>Goodbye</span></div> <div class="options" id="option3"><span>How<br>are<br>you?</span></div> <div class="options" id="option4"><span>Fine</span></div> <div class="options" id="option5"><span>Okay</span></div> </div> </body> <footer> <!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script> <script type="text/javascript" src="index.js"></script> </footer> </html>
As suggested in the official page, I tried the second approach, which is adding 如官方页面所建议，我尝试了第二种方法，即添加
"import Swal from 'sweetalert2'" “从'sweetalert2'导入Swal”
and "const Swal = require('sweetalert2')" 和“ const Swal = require（'sweetalert2'）”
in a JavaScript file. 在JavaScript文件中。
So, I did and got the following error messages: 因此，我确实收到了以下错误消息：
Uncaught SyntaxError: Unexpected identifier 未捕获的SyntaxError：意外的标识符
due to "import Swal from 'sweetalert2'". 由于“从'sweetalert2'导入Swal”。
Also, none of JavaScript code worked, which was showing five circles after clicking the green button. 另外，JavaScript代码均无效，单击绿色按钮后显示五个圆圈。
In conclusion, the second try caused more issues for me. 总之，第二次尝试给我带来了更多问题。
How could I make sweetalert2 work? 我如何使sweetalert2工作？ Please give me any advice. 请给我任何建议。 Thanks in advance! 提前致谢！
1 个解决方案
解决方案1
0 2018-08-02 08:02:13
I found 2 Problems in your case. 我发现您遇到2个问题。
The Jquery CDN link is placed after sweetheart Link.put the jquery CDN link above Sweetalert instead of footer.
Jquery CDN链接放置在sweetheart Link之后。将jquery CDN链接放在Sweetalert上方，而不是页脚。 use 'S' in uppercase Swal({ title: 'Sweet!',.
在大写的Swal中使用'S'（{title：'Sweet！'，..
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.