sweetalert2 - Sweet Alert 2 - 让多个按钮打开不同的警报

Question

我有一个有多个按钮的甜蜜警报。当用户单击一个按钮时，它应该打开一个不同的警报。我可以让 1 个按钮工作，但仅此而已。Sweet Alert 2 有可能吗？

代码：

$("#swa").on("click", function(e) {
        swal({
          title: '<u><b>Test 1</b></u><p>&nbsp;</p>',
          html:
            '<button id="panel2">Panel 2</button>'+
            '<p>&nbsp;</p>'+
            '<button id="panel3">Panel 3</button>',
          showCloseButton: true,
          showCancelButton: true,
          cancelButtonText: 'Go Back',
          width: '75%'
        })


$("#panel2").on("click", function(e) {
        swal({
          title: '<u><b>Test 2</b></u><p>&nbsp;</p>',
          html:
            'Test 2',
          showCloseButton: true,
          showCancelButton: true,
          cancelButtonText: 'Go Back',
          width: '75%'
        })

$("#panel3").on("click", function(e) {
        swal({
          title: '<u><b>Test 3</b></u><p>&nbsp;</p>',
          html:
            'Test 3',
          showCloseButton: true,
          showCancelButton: true,
          cancelButtonText: 'Go Back',
          width: '75%'
        })
});
});
});

JS小提琴

Answer 1

发生的事情是您的 panel2 甜蜜警报中有您的 panel3 甜蜜警报。要解决此问题，只需移动});

您的 JavaScript 现在将是；

$("#panel2").on("click", function(e) {
        swal({
          title: '<u><b>Test 2</b></u><p>&nbsp;</p>',
          html:
            'Test 2',
          showCloseButton: true,
          showCancelButton: true,
          cancelButtonText: 'Go Back',
          width: '75%'
        })
    });// <--moved this here

$("#panel3").on("click", function(e) {
        swal({
          title: '<u><b>Test 3</b></u><p>&nbsp;</p>',
          html:
            'Test 3',
          showCloseButton: true,
          showCancelButton: true,
          cancelButtonText: 'Go Back',
          width: '75%'
        })
});
//<--from here
});// I don't think this line is needed

顺便说一句，});除非它与您尚未发布的代码有关，否则不需要最后一个。

祝你好运。