SweetAlert2：在单击按钮后根据选择 div 执行 "function" 或 "async function"
SweetAlert2 : Executing "function" or "async function" based on selection of a div after clicking a button
现在，发生的情况如下：
1.点击中间的一个按钮，会出现五个圆圈。
2. 当你点击一个圆圈时，会出现一条用 SweetAlert2 制作的弹出消息。
3.点击弹出消息中的"ok"按钮时，消息关闭，可以看到圆圈的背景变成了浅橙色。
在这个, Temani Afif let me know how to execute different SweetAlert function.
His solution was using if($(this).attr('id')!="option5") and else within .on("click", function(){}. (jsFiddle for his solution can be found here).
他的解决方案适用于在不需要 async 的函数中进行选择。
顺便说一下，我对单击按钮后基于选择 div 执行 "function" 或 "async function" 感到好奇，他建议我问另一个问题。我问过他这个问题，他建议我加一个问题。所以，我发布这个！
我想做什么：仅在单击带有文本 "okay".
的圆圈时显示要求用户输入的弹出消息
挑战：当前的 SweetAlert2 消息以 click: function(){ 开头，我想包含的弹出消息以 click: async function(){ 开头。
注意：我为所有圈子分配了"options" class，并且为每个圈子分配了不同的id。文本为 "okay" 的圆圈的 ID 为 "option5".
我将不胜感激任何建议。提前致谢！
$(document).ready(function() {
$("#fallingStars").delay(300).animate({'opacity':'1'},500);
$("#title").delay(500).animate({'opacity':'1'},800);
$("#slogan").delay(800).animate({'opacity':'1'},800);
// https://codepen.io/hlim18/pen/EpbLmN
$('#test').click(function(){
// $(".options").fadeToggle();
$(".options:hidden").fadeIn()
.on("click", function(){
// hex color #_ _ _ _ _ _
$(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
})
// click: async function(){
// // // "text" enter message START
// const {value: text} = await swal({
// title: 'Why do you feel unsafe here?',
// input: 'text',
// inputPlaceholder: 'Type your message :)',
// customClass: 'swal2-textbox-msg',
// showCancelButton: true,
// confirmButtonColor: '#F3C78D',
// confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Yes!</div>',
// cancelButtonColor: '#9FEDDA',
// cancelButtonText: '<div id="swal2-cancelBtnTxt" style="color:#000000">Cancel</div>',
// // backdrop color : light gray
// backdrop: `
// rgba(211,211,211,0.4)
// center left
// no-repeat
// `,
// inputValidator: (value) => {
// return !value && 'You need to write something!'
// }
// });
// if (text) {
// swal({
// text: `Your entered : "${text}"`,
// // backdrop color : light gray
// backdrop: `
// rgba(211,211,211,0.4)
// center left
// no-repeat
// `,
// confirmButtonColor: '#F3C78D',
// confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Okay</div>'
// })
// }
}
});
});
})
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>
<!-- Required meta tags -->
<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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- 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>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/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>
</html>
我找到了解决办法！我为选项 1~4 分配了 "withoutInput" class，为选项 5 分配了 "withInput" class。
- 要有多个 class，请在 class 之间放置一个 space。例如，要将
class apple 和 class orange 放在一起，您可以写成 class="apple orange".
$(document).ready(function() {
// https://codepen.io/hlim18/pen/EpbLmN
$('#test').click(function(){
// $(".options").fadeToggle();
$(".withoutInput:hidden").fadeIn()
.on("click", function(){
// hex color #_ _ _ _ _ _
$(this).css("background", "#F3C78D");
})
.on({
// // include this for "thank-you" & "cancel" message codes
click: function(){
// // "Thank-you" message START
swal({
title: 'Thank you!',
text: 'Your input has been recorded.',
// type: 'warning',
imageUrl: 'https://unsplash.it/400/200',
imageAlt: 'Unsplash',
// imageClass: 'swal2-thx-img',
animation: false,
customClass: 'swal2-thx-msg',
// backdrop color : light gray
backdrop: `
rgba(211,211,211,0.4)
center left
no-repeat
`,
confirmButtonColor: '#9FEDDA',
confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Got it!</div>'
})
}
// // "click: function" END
// // "Thank-you" message END
});
// "withoutInput" END
$(".withInput:hidden").fadeIn()
.on("click", function(){
// hex color #_ _ _ _ _ _
$(this).css("background", "#F3C78D");
})
.on({
// include this for "text-input" & "login & password" message codes
click: async function(){
// // // "text" enter message START
const {value: text} = await swal({
title: 'Why do you feel unsafe here?',
input: 'text',
inputPlaceholder: 'Type your message :)',
customClass: 'swal2-textbox-msg',
showCancelButton: true,
confirmButtonColor: '#F3C78D',
confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Yes!</div>',
cancelButtonColor: '#9FEDDA',
cancelButtonText: '<div id="swal2-cancelBtnTxt" style="color:#000000">Cancel</div>',
// backdrop color : light gray
backdrop: `
rgba(211,211,211,0.4)
center left
no-repeat
`,
inputValidator: (value) => {
return !value && 'You need to write something!'
}
});
if (text) {
swal({
text: `Your entered : "${text}"`,
// backdrop color : light gray
backdrop: `
rgba(211,211,211,0.4)
center left
no-repeat
`,
confirmButtonColor: '#F3C78D',
confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Okay</div>'
})
}
// // "text" enter message END
}
// // async msg END
});
// // "withInput" END
});
})
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%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- 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>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css'>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options withoutInput" id="option1"><span>Hello<br>World</span></div>
<div class="options withoutInput" id="option2"><span>Goodbye</span></div>
<div class="options withoutInput" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options withoutInput" id="option4"><span>Fine</span></div>
<div class="options withInput" id="option5"><span>Okay</span></div>
</div>
</body>
</html>
现在，发生的情况如下：
1.点击中间的一个按钮，会出现五个圆圈。
2. 当你点击一个圆圈时，会出现一条用 SweetAlert2 制作的弹出消息。
3.点击弹出消息中的"ok"按钮时，消息关闭，可以看到圆圈的背景变成了浅橙色。
在这个
His solution was using if($(this).attr('id')!="option5") and else within .on("click", function(){}. (jsFiddle for his solution can be found here).
他的解决方案适用于在不需要 async 的函数中进行选择。
顺便说一下，我对单击按钮后基于选择 div 执行 "function" 或 "async function" 感到好奇，他建议我问另一个问题。我问过他这个问题，他建议我加一个问题。所以，我发布这个！
我想做什么：仅在单击带有文本 "okay".
的圆圈时显示要求用户输入的弹出消息
挑战：当前的 SweetAlert2 消息以 click: function(){ 开头，我想包含的弹出消息以 click: async function(){ 开头。
注意：我为所有圈子分配了"options" class，并且为每个圈子分配了不同的id。文本为 "okay" 的圆圈的 ID 为 "option5".
我将不胜感激任何建议。提前致谢！
$(document).ready(function() {
$("#fallingStars").delay(300).animate({'opacity':'1'},500);
$("#title").delay(500).animate({'opacity':'1'},800);
$("#slogan").delay(800).animate({'opacity':'1'},800);
// https://codepen.io/hlim18/pen/EpbLmN
$('#test').click(function(){
// $(".options").fadeToggle();
$(".options:hidden").fadeIn()
.on("click", function(){
// hex color #_ _ _ _ _ _
$(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
})
// click: async function(){
// // // "text" enter message START
// const {value: text} = await swal({
// title: 'Why do you feel unsafe here?',
// input: 'text',
// inputPlaceholder: 'Type your message :)',
// customClass: 'swal2-textbox-msg',
// showCancelButton: true,
// confirmButtonColor: '#F3C78D',
// confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Yes!</div>',
// cancelButtonColor: '#9FEDDA',
// cancelButtonText: '<div id="swal2-cancelBtnTxt" style="color:#000000">Cancel</div>',
// // backdrop color : light gray
// backdrop: `
// rgba(211,211,211,0.4)
// center left
// no-repeat
// `,
// inputValidator: (value) => {
// return !value && 'You need to write something!'
// }
// });
// if (text) {
// swal({
// text: `Your entered : "${text}"`,
// // backdrop color : light gray
// backdrop: `
// rgba(211,211,211,0.4)
// center left
// no-repeat
// `,
// confirmButtonColor: '#F3C78D',
// confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Okay</div>'
// })
// }
}
});
});
})
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>
<!-- Required meta tags -->
<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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- 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>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/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>
</html>
我找到了解决办法！我为选项 1~4 分配了 "withoutInput" class，为选项 5 分配了 "withInput" class。
- 要有多个 class，请在 class 之间放置一个 space。例如，要将
class apple和class orange放在一起，您可以写成class="apple orange".
$(document).ready(function() {
// https://codepen.io/hlim18/pen/EpbLmN
$('#test').click(function(){
// $(".options").fadeToggle();
$(".withoutInput:hidden").fadeIn()
.on("click", function(){
// hex color #_ _ _ _ _ _
$(this).css("background", "#F3C78D");
})
.on({
// // include this for "thank-you" & "cancel" message codes
click: function(){
// // "Thank-you" message START
swal({
title: 'Thank you!',
text: 'Your input has been recorded.',
// type: 'warning',
imageUrl: 'https://unsplash.it/400/200',
imageAlt: 'Unsplash',
// imageClass: 'swal2-thx-img',
animation: false,
customClass: 'swal2-thx-msg',
// backdrop color : light gray
backdrop: `
rgba(211,211,211,0.4)
center left
no-repeat
`,
confirmButtonColor: '#9FEDDA',
confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Got it!</div>'
})
}
// // "click: function" END
// // "Thank-you" message END
});
// "withoutInput" END
$(".withInput:hidden").fadeIn()
.on("click", function(){
// hex color #_ _ _ _ _ _
$(this).css("background", "#F3C78D");
})
.on({
// include this for "text-input" & "login & password" message codes
click: async function(){
// // // "text" enter message START
const {value: text} = await swal({
title: 'Why do you feel unsafe here?',
input: 'text',
inputPlaceholder: 'Type your message :)',
customClass: 'swal2-textbox-msg',
showCancelButton: true,
confirmButtonColor: '#F3C78D',
confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Yes!</div>',
cancelButtonColor: '#9FEDDA',
cancelButtonText: '<div id="swal2-cancelBtnTxt" style="color:#000000">Cancel</div>',
// backdrop color : light gray
backdrop: `
rgba(211,211,211,0.4)
center left
no-repeat
`,
inputValidator: (value) => {
return !value && 'You need to write something!'
}
});
if (text) {
swal({
text: `Your entered : "${text}"`,
// backdrop color : light gray
backdrop: `
rgba(211,211,211,0.4)
center left
no-repeat
`,
confirmButtonColor: '#F3C78D',
confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Okay</div>'
})
}
// // "text" enter message END
}
// // async msg END
});
// // "withInput" END
});
})
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%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<!-- <link href="https://fonts.googleapis.com/css?family=Sunflower:300" rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
<!-- 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>
<!-- sweetalert2 -->
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.all.min.js"></script>
<!-- CSS -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@7.12.15/dist/sweetalert2.min.css'>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-outline-success" id="test">test</button>
<div class="options withoutInput" id="option1"><span>Hello<br>World</span></div>
<div class="options withoutInput" id="option2"><span>Goodbye</span></div>
<div class="options withoutInput" id="option3"><span>How<br>are<br>you?</span></div>
<div class="options withoutInput" id="option4"><span>Fine</span></div>
<div class="options withInput" id="option5"><span>Okay</span></div>
</div>
</body>
</html>