首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >基于if语句链接额外的甜蜜警报

基于if语句链接额外的甜蜜警报
EN

Stack Overflow用户
提问于 2018-06-06 06:20:37
回答 1查看 2K关注 0票数 2

我正在尝试使用SweetAlert2创建一个逐步的表单,并且我需要能够基于if语句在我的链接中添加额外的步骤。

例如,在我的第三个模式中,我可能有一个单选问题,说“你会带一个加1吗?”,如果用户选择“true”,我需要弹出一个额外的阶段,询问“name of plus 1”,如果用户选择“false”,则只需继续。

代码语言:javascript
复制
swal.mixin({
        confirmButtonText: 'Next →',
        showCancelButton: true,
        progressSteps: ['1', '2', '3', '4']
      }).queue([
        {
            title: 'Which event?',
            text: 'Please start by selecting the event you would like to book in!',
            input: 'select',
            inputClass: 'swal-select-event',
            inputPlaceholder: 'Please Select',
            inputOptions: {
                '1' : 'Dance Event',
                '2' : 'Football Event'
            },
            inputValidator: (value) => {
                return new Promise((resolve) => {
                  if (value === '') {
                    resolve('You need to select an event!')
                  } else {
                    resolve()
                  }
                })
            }
        },
        {
            title: 'What Day?',
            text: 'Which day are they due to come in?',
            html:'<input id="swal-booking-date-select" type="date"/>',
            preConfirm: () => {
                return document.getElementById('swal-booking-date-select').value
            },
            inputValidator: (value) => {
                return new Promise((resolve) => {
                  if (value === '') {
                    resolve('You need to select a date!')
                  } else {
                    resolve()
                  }
                })
            }
        },
        {
            title: 'Plus one?',
            text: 'Will you be bringing a plus one with you?',
            input: 'radio',
            inputOptions: {
                    'yes' : 'Yes',
                    'no' : 'No'
                },
            inputValidator: (value) => {
                return new Promise((resolve) => {
                    if (value === null) {
                        resolve('I need to know if you will be bringing a plus 1!')
                    } else if(value === 'yes') {


                        //EXTRA STAGE GOES HERE TO GET PLUS ONE NAME


                    } else {
                        resolve()
                    }
                })
            }
        },
        {
            title: 'What else?',
            input: 'text',
            text: 'Any other information that needs noting for this booking?'
        }
      ]).then((result) => {
        if (result.value) {
            //Do something with all of the data here
        }
      })

有没有人知道这是否可能?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-06 07:25:10

一种方法是使用一个简单的Swal实例来实现这个额外的可选步骤...并将该值保存在全局声明的备用变量中。

代码语言:javascript
复制
var plus1name="";

为了清楚起见,我不会重复你所有的代码,因为没有改变。下面是要添加的新部件:

代码语言:javascript
复制
//EXTRA STAGE GOES HERE TO GET PLUS ONE NAME
swal({
  title:"Plus one!",
  text:"What is his/her name?",
  input:"text"
}).then(function(value){
  plus1name = value;
  resolve();
});

然后在.then(result)部分中:

代码语言:javascript
复制
//Do something with all of the data here

swalResults = result.value;
swalResults.push(plus1name.value)
console.log(swalResults);

所以你有一个包含所有答案的数组。额外的问题是在它的末尾推送的,所以数组中的顺序不是询问的顺序……

我在上做过。

票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50709734

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档