在单击按钮后基于选择 div 在 SweetAlert2 弹出消息中包含不同的图像

Question

我认为过去有人回答过与此问题类似的问题。但是，我看了很多Whosebug的帖子，还是没能解决问题。可能是因为我还没有很好地理解 jQuery 并且无法将基本概念应用于我需要解决的问题。所以，如果你能帮我解决这个问题，我将不胜感激。谢谢！

现在，会发生以下情况：

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

2. 当你点击一个圆圈时，会出现一条用 SweetAlert2 制作的弹出消息。

3.点击弹出消息中的"ok"按钮时，消息关闭，可以看到圆圈的背景变成了浅橙色。

我想做什么 : 当单击带有文本 "okay" 的圆圈时，在弹出消息中显示不同的图像 (https://s25.postimg.cc/kw0l49gz3/original.png)。

注意：我为所有圈子分配了"options" class，并且为每个圈子分配了不同的id。文本为 "okay" 的圆圈的 ID 为 "option5".

$(document).ready(function() {
  $('#test').click(function(){
  $(".options:hidden").fadeIn()
    .on("click", function(){
      $(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
      })
      //  swal({
      //   title: 'Sweet!',
      //   text: 'Modal with a custom image.',
      //   imageUrl: 'https://s25.postimg.cc/kw0l49gz3/original.png',
      //   imageWidth: 400,
      //   imageHeight: 200,
      //   imageAlt: 'Custom image',
      //   animation: false
      // })
     });
  });
});

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>

Answer 1

你可以使用data-attribute在元素内部定义图片link，然后你就可以很方便的在JS代码中使用它。您也可以对其他参数执行相同的操作。

$(document).ready(function() {
  $('#test').click(function(){
  $(".options:hidden").fadeIn()
    .on("click", function(){
      $(this).css("background", "#F3C78D");
    })
    .on("click", function(){
      var url=$(this).attr('data-img');
      swal({
        title: 'Sweet!',
        text: 'Modal with a custom image.',
        imageUrl: url,
        imageWidth: 400,
        imageHeight: 200,
        imageAlt: 'Custom image',
        animation: false
      })

     });
  });
});

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" data-img="https://unsplash.it/400/200" id="option1"><span>Hello<br>World</span></div>
    <div class="options" data-img="https://unsplash.it/400/200" id="option2"><span>Goodbye</span></div>
    <div class="options" data-img="https://unsplash.it/400/200" id="option3"><span>How<br>are<br>you?</span></div>
    <div class="options" data-img="https://unsplash.it/400/200" id="option4"><span>Fine</span></div>
    <div class="options" data-img="https://s25.postimg.cc/kw0l49gz3/original.png" id="option5"><span>Okay</span></div>
  </div>
</body>
</html>

在单击按钮后基于选择 div 在 SweetAlert2 弹出消息中包含不同的图像

Including a different image in SweetAlert2 popup message based on selection of a div after clicking a button

html

javascript

css

jquery

sweetalert2