Javascript 第二条：执行；功能“；或；异步函数；基于单击按钮后选择的div

现在发生的情况如下：

1.当点击中间的按钮时，五个圆圈出现。

2.当您单击一个圆圈时，将显示一条由SweetAlert2生成的弹出消息。

3.单击弹出消息中的“确定”按钮时，消息关闭，您可以看到圆圈的背景已更改为浅橙色。

在这里，让我知道如何执行不同的SweetAlert函数。

他的解决方案是使用

if（$（this）.attr（'id'）！=“option5”）

和

中的
else
。on（“单击”，function（）{}

（可以找到他的解决方案的JSFIDLE）。

他的解决方案用于在不需要

async

的函数中进行选择

顺便说一句，我对在点击按钮后选择div执行“function”或“async function”感到好奇，他建议我问另一个问题。我问了他这个问题，他建议我添加一个问题。所以，我发布这个！

我想做的是：仅当单击带有文本“OK”的圆圈时，显示需要用户输入的弹出消息。

挑战：当前的SweetAlert2消息以

click:function（）{

开头，我想包含的弹出消息以

click:async function（）{

开头。

注意：我为所有圆圈分配了“选项”类，为每个圆圈分配了不同的id。带有文本“OK”的圆圈的id是“选项5”。

我非常感谢您的建议。提前谢谢

$（文档）.ready（函数（）{
$（“#fallingStars”）.delay（300）。动画（{'opacity'：'1'}，500）；
$（“#title”）.delay（500）。动画（{'opacity'：'1'}，800）；
$（“#标语”）.delay（800）。动画（{'opacity'：'1'}，800）；
// https://codepen.io/hlim18/pen/EpbLmN
$（“#测试”）。单击（函数（）{
//$（“.options”）.fadeToggle（）；
$（“.options:hidden”）.fadeIn（）
.on（“单击”，函数（）{
//十六进制颜色_
$（this.css（“背景”，“F3C78D”）；
})
.在({
单击：函数（）{
游泳({
标题：“甜蜜！”，
文本：“具有自定义图像的模态。”，
imageUrl:'https://unsplash.it/400/200',
图像宽度：400，
图像高度：200，
imageAlt:'自定义图像'，
动画：错误
})
//单击：异步函数（）{
////“文本”输入消息开始
//const{value:text}=wait swal({
//标题：“你为什么觉得这里不安全？”，
//输入：“文本”，
//inputPlaceholder:'键入您的消息：）'，
//customClass:“swal2文本框消息”，
//showCancelButton:true，
//confirmButtonColor:“#F3C78D”，
//confirmButtonText:“是！”，
//取消按钮颜色：“#9FEDDA”，
//cancelButtonText:“取消”，
////背景颜色：浅灰色
//背景：`
//rgba（211211211,0.4）
//中间偏左
//不许重复
//     `,
//inputValidator：（值）=>{
//return！value&“您需要写一些东西！”
//     }
// });
//如果（文本）{
//游泳({
//text:`您输入的：“${text}”`，
////背景颜色：浅灰色
//背景：`
//rgba（211211211,0.4）
//中间偏左
//不许重复
//         `,
//confirmButtonColor:“#F3C78D”，
//confirmButtonText：“好的”
//     })
// }
}
});
});     
})

正文{
字体系列：“可怜的故事”，无衬线；
}
#试验{
光标：指针；
显示：块；
文本对齐：居中；
位置：绝对位置；
显示器：flex；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
.选项{
背景#f7f7f5；
显示：无；
文本对齐：居中；
垂直对齐：中间对齐；
位置：绝对位置；
宽度：100%；
左：50%；
最高：50%；
边界半径：50%；
边框样式：实心；
边框颜色：#F3C78D；
宽度：60px；
高度：60px；
字体大小：12px；
}
.选项范围{
颜色：#000000；
文本对齐：居中；
垂直对齐：中间对齐；
位置：绝对位置；
宽度：100%；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
#选择1{
转换：转换（-100%，-150%）；
}
#选择2{
转换：翻译（-160%，-40%）；
}
#选择3{
转换：翻译（-50%，50%）；
}
#选择4{
转化：翻译（60%，-40%）；
}
#选择5{
转换：翻译（15%，-150%）；
}

测试
你好
世界
再见

你好吗？
好的
可以

我找到了一个解决方案！我为选项1~4分配了“WithOutput”类，为选项5分配了“withInput”类

• 要有多个类，请在类之间留出一个空格。例如，要将

  class apple

  和

  class orange

  放在一起，您可以编写为

  class=“apple orange”

$（文档）.ready（函数（）{
// https://codepen.io/hlim18/pen/EpbLmN
$（“#测试”）。单击（函数（）{
//$（“.options”）.fadeToggle（）；
$（“.withoutput:hidden”）.fadeIn（）
.on（“单击”，函数（）{
//h