吐司机:吐司顶部居中;t第一次点击按钮就不会被应用

Toastr: toast-top-center doesn't get applied at the first click of the button

本文关键字：吐司 按钮 应用 第一次 司机 顶部      更新时间：2023-09-26

单击按钮时，消息显示在右上角。只有在一到两次尝试之后，它才会被定位在顶部中心。但当提交表格时，它应该在第一次点击时位于顶部中心。有人能告诉我为什么会这样，以及如何纠正吗？我已经包含了下面的代码片段。

<!DOCTYPE html>
<html>
<head>
<script
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
 src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet"
 href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
</head>
<body>
<p>toast-top-center</p>
<button onclick="myFunction()">Click Here</button>
<p id="demo"></p>
<script>
function myFunction() {
   Command: toastr["error"]
           ("I'm not in the top-center!")
         toastr.options = {
          "closeButton" : false,
          "debug" : false,
          "newestOnTop" : false,
          "progressBar" : false,
          "positionClass" : "toast-top-center",
          "preventDuplicates" : false,
          "onclick" : null,
          "showDuration" : "300",
          "hideDuration" : "1000",
          "timeOut" : "5000",
          "extendedTimeOut" : "1000",
          "showEasing" : "swing",
          "hideEasing" : "linear",
          "showMethod" : "fadeIn",
          "hideMethod" : "fadeOut"
         }
}
</script>
</body>
</html>

我认为错误是因为您在读取选项之前运行了toast。

这就是为什么第一个吐司在右上角。

在你的功能结束时运行吐司，它就会起作用。

<!DOCTYPE html>
<html>
<head>
<script
 src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script
 src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<link rel="stylesheet"
 href="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css">
</head>
<body>
<p>toast-top-center</p>
<button onclick="myFunction()">Click Here</button>
<p id="demo"></p>
<script>
function myFunction() {
         toastr.options = {
          "positionClass" : "toast-top-center",
          "closeButton" : false,
          "debug" : false,
          "newestOnTop" : false,
          "progressBar" : false,
          "preventDuplicates" : false,
          "onclick" : null,
          "showDuration" : "300",
          "hideDuration" : "1000",
          "timeOut" : "5000",
          "extendedTimeOut" : "1000",
          "showEasing" : "swing",
          "hideEasing" : "linear",
          "showMethod" : "fadeIn",
          "hideMethod" : "fadeOut"
         }
   Command: toastr["success"]
           ("I'm in the top-center!")
}
</script>
</body>
</html>

这是1.22版本中的一个错误，只需从GitHub下载当前版本即可。

Toast Github链接

相关文章：