Sweet Alert 2 - Mit mehreren Tasten öffnen verschiedene Warnungen

Question

Ich habe eine süße Warnung, die mehrere Tasten hat. Wenn ein Benutzer auf eine Schaltfläche klickt, sollte er eine andere Warnung öffnen. Ich bin in der Lage, 1 Knopf zur Arbeit zu bekommen, aber das ist es. Ist das mit Sweet Alert 2 möglich?

Code:

$("#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 Fiddle

Answer 1

, was passiert ist, dass Sie Ihre Panel3 süß Alarm in Ihrem panel2 süß Alarm haben. Um dies zu beheben, bewegen Sie einfach die });

Ihr javaScript wird jetzt;

$("#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 

Durch die Art und Weise der letzte }); nicht benötigt wird, es sei denn, es Code bezieht, die Sie nicht gebucht haben.

Viel Glück.