單選按鈕，多個對話框，jquery

Question

所以我想讓我的3個單選按鈕，每個彈出一個不同的對話框使用jQuery。 （http://www.regrettablehookups.com/sandbox/contact.php）

這是我在標題：

//Radio Button 
$("#radioset").buttonset(); 
//Button 
$("#dialog_button").button({ 
    icons: { 
     primary: 'ui-icon-newwin' 
    } 
}); 

// Dialog   
$('#dialog').dialog({ 
    autoOpen: false, 
    width: 600, 
    buttons: { 
     "Okay": function() { 
      $(this).dialog("close"); 

     }, 
     "Cancel": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 


// Dialog Link 
$('#dialog_button').click(function() { 
    $('#dialog').dialog('open'); 
    return false; 
}); 
}); 

和代碼在我的身上：

<div id="radioset"> 
    <input type="radio" id="kevin" name="radio" /><label for="kevin">Kevin</label> 
    <input type="radio" id="natalie" name="radio" /><label for="natalie">Natalie</label> 
    <input type="radio" id="kaitlyn" name="radio" /><label for="kaitlyn">Kaitlyn</label> 
</div> 

謝謝你們！ :)

Answer 1

以下是我會做：

<script type="text/javascript"> 
    $(function() { 
     $("#dialog1").dialog({ 
      autoOpen: false, 
      buttons: { 
       Kevin: function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
     $("#dialog2").dialog({ 
      autoOpen: false, 
      buttons: { 
       Natalie: function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 
     $("#dialog3").dialog({ 
      autoOpen: false, 
      buttons: { 
       Kaitlyn: function() { 
        $(this).dialog('close'); 
       } 
      } 
     }); 

     $("#radioset").buttonset(); 
     $('#radioset input:radio').change(function() { 
      var value = $(this).val(); 
      switch (value) { 
       case 'kevin': 
        fireKevin(); 
        break; 
       case 'natalie': 
        fireNatalie(); 
        break; 
       case 'kaitlyn': 
        fireKaitlyn(); 
        break; 
      } 
     }); 
    }); 

    function fireKevin() { 
     $('#dialog1').dialog('open'); 
    } 
    function fireNatalie() { 
     $('#dialog2').dialog('open'); 
    } 
    function fireKaitlyn() { 
     $('#dialog3').dialog('open'); 
    } 
</script> 

<div id="radioset"> 
    <input type="radio" id="kevin" name="radio" value="kevin" /><label for="kevin">Kevin</label> 
    <input type="radio" id="natalie" name="radio" value="natalie" /><label for="natalie">Natalie</label> 
    <input type="radio" id="kaitlyn" name="radio" value="kaitlyn" /><label for="kaitlyn">Kaitlyn</label> 
</div> 

<div id="dialog1">Dialog 1</div> 
<div id="dialog2">Dialog 2</div> 
<div id="dialog3">Dialog 3</div> 

順便說一句，你可以只分享一個對話窗口，所有三個科目，而是根據自己的需要，這樣很容易變得很醜陋快速（比如說，每個主題需要不同的按鈕，或者內部html需要相應更改等）。