Question

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Project 506</title>
    <link rel="stylesheet" href="" type="text/css" />
    <script type="text/javascript" src="sweetalert.min.js"></script>
    <style type="text/css">
      body {
        text-align: center;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function () {
        $("#first").click(function () {
          alert("Oops...", "Something went wrong!", "error");
        });
     });
    </script>
  </head>
  <body>
    <h1>Message Boxes</h1>
    <input type="button" id="first" value="Just a Notification" />
    <input type="button" id="second" value="Successfully Completed!" />
    <input type="button" id="third" value="Something Went Wrong!" />
  </body>
</html>

点击#first后如何显示提示框？我不确定这段代码有什么问题。

感谢您的帮助。

Answer 1

您忘记在代码中添加jquery库。您需要在头部或主体内的代码中包含jquery脚本，以使代码正常工作。

Jquery的

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

alert()函数中只允许一个参数。如果使用多个参数，则将使用逗号前的第一个参数。

这是您的代码

alert("Oops...", "Something went wrong!", "error"); //this will alert oops..

更新了代码

alert("Oops...Something went wrong! error");

我在你的代码中看到你使用了甜蜜的alert.js。如果你想要sweetalert而不是本机警报框。您需要使用以下代码替换您的代码。逗号允许使用逗号

sweetAlert("Oops...", "Something went wrong!", "error");

查看更新的代码:)：）

<!DOCTYPE html>
<html>
<head>
    <title>Project 506</title>
    <link rel="stylesheet" href="" type="text/css" />

    <script type="text/javascript" src="sweetalert.min.js"></script>
    <style type="text/css">
    body {
    text-align: center;
    }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#first").click(function () {
                alert("Oops...Something went wrong! error");
            });
         });
    </script>
</head>
<body>
    <h1>Message Boxes</h1>
    <input type="button" id="first" value="Just a Notification" />
    <input type="button" id="second" value="Successfully Completed!" />
    <input type="button" id="third" value="Something Went Wrong!" />
<script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>

请参阅js fiddle JSFIDDLE

Answer 2

HTML文档的head标记中缺少jQuery库。包含在<head>和</head>标记之间。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

您的HTML文件应如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>Project 506</title>
    <link rel="stylesheet" href="" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="sweetalert.min.js"></script>
    <style type="text/css">
    body {
    text-align: center;
    }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#first").click(function () {
                alert("Oops...", "Something went wrong!", "error");
            });
         });
    </script>
</head>
<body>
    <h1>Message Boxes</h1>
    <input type="button" id="first" value="Just a Notification" />
    <input type="button" id="second" value="Successfully Completed!" />
    <input type="button" id="third" value="Something Went Wrong!" />
</body>
</html>

Answer 3

您不必将Commas放在警报中的字符串引号之外。您也可以在结束正文标记之前编写脚本代码，而不是将其写入 head标记。这肯定会奏效。

$(document).ready(function () {
        $("#first").click(function () {
            alert("Oops... , Something went wrong! , error");
        });
});

提醒按钮未响应

3 个答案: