jQuery Alert with Yes/No - JavaScript

在Web开发中，经常需要显示一些对话框来与用户进行交互。其中一个常见的对话框就是带有Yes和No按钮的警告对话框。这种对话框是用来确认用户是否要执行某个操作或者进行某个更改，对于提高用户体验非常有帮助。在本文中，我们将介绍如何使用jQuery来创建一个带有Yes和No按钮的警告对话框。

准备工作

在开始之前，你需要将jQuery添加到你的代码中。你可以通过CDN来获取jQuery或者在本地进行安装。在这里，我们将使用CDN方式。将以下代码添加到你的HTML文件的标签中：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

创建HTML

我们需要在HTML中创建一个元素，用来触发显示我们的警告对话框。在这个例子中，我们将使用一个button元素。将以下代码添加到你的HTML文件中：

<button id="confirm-btn">Click me</button>

创建JavaScript

我们需要编写一些JavaScript代码来监听用户点击按钮并显示警告对话框。将以下代码添加到你的JavaScript文件中：

$('#confirm-btn').on('click', function() {
  var message = 'Are you sure you want to proceed?';
  var confirmed = confirm(message);
  if (confirmed) {
    // 如果用户点击Yes，执行下面的代码
    alert('You clicked Yes!');
  } else {
    // 如果用户点击No，执行下面的代码
    alert('You clicked No!');
  }
});

这段代码通过jQuery选择器找到了我们之前创建的按钮元素，并添加了一个点击事件监听。当用户点击按钮时，代码将会创建一个confirm对话框，并显示我们定义的信息。如果用户点击了Yes按钮，代码将会执行条件语句中的第一个分支。如果用户点击了No按钮，代码将会执行第二个分支。

总结

到此为止，我们已经介绍了如何使用jQuery来创建带有Yes和No按钮的警告对话框。这个例子只是一个基础的示例，但是你可以在其上进行扩展，以实现更为复杂的功能。警告对话框可以帮助我们简化我们的交互流程，并优化用户的体验。