SweetAlert2：点击按钮后根据div的选择执行“功能”或“异步功能”

时间：2018-08-06 06:42:54

标签： javascript jquery html promise sweetalert2

现在，将发生以下情况：

1.单击中间的按钮时，将显示五个圆圈。

2.单击一个圆圈时，将显示一个由SweetAlert2发出的弹出消息。

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

在此post中，Temani Afif让我知道如何执行不同的SweetAlert函数。

他的解决方案是在{{1中使用if($(this).attr('id')!="option5")和else }}。 （可以通过here找到jsFiddle的解决方案）。

他的解决方案可在不需要.on("click", function(){}的功能中进行选择。

顺便说一句，我对单击按钮后基于div的选择执行“功能”或“异步功能”感到好奇，他建议我再问一个问题。我问他这个问题，他建议我补充一个问题。所以，我要发布这个！

我想做什么：仅当单击带有“ okay”文本的圆圈时，显示一条弹出消息，要求用户输入。

挑战：当前的SweetAlert2消息以async开头，而我想包含的弹出消息以click: function(){开头。

注意：我为所有圈子分配了“选项”类，并为每个圈子分配了不同的ID。文本为“ okay”的圆圈的ID为“ option5”。

我将不胜感激任何建议。预先感谢！

click: async function(){
$(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%);
}

1 个答案:

答案 0 :(得分：0)

我找到了解决方案！我为选项1〜4分配了“ withoutInput”类，为选项5分配了“ withInput”类。

  • 要具有多个类，请在各类之间放置一个空格。例如，要将TextMetrics { id: textMetrics text: textSample72.text font: textSample72.font } Rectangle { y: 40 // if the rectangle is moved, x: 40 // the text will also move width: textMetrics.tightBoundingRect.width height: textMetrics.tightBoundingRect.height color: "#bbbbdd" Text { id: textSample72 text: "TextSample72" verticalAlignment: Text.AlignBottom font.pointSize: 72 anchors.top: parent.top anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter } } 和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%);
}

相关问题
最新问题