結合多個jQuery對話框選擇器

Question

我想知道如何組合不同選擇器的功能。所有的功能打開和關閉對話框，但不同的對話框。所以我不知道這是否可能。它看起來不對，如果有人看到它，他們會稱我爲白癡。現在我有：

$(document).ready(function() { 
    $('div#basic_dialog').dialog({ 
     autoOpen: false, 
     buttons: { 
      "Close": function() { 
       $('div#basic_dialog').dialog("close"); 
       window.location.href = "#contact"; 
      } 
     } 
    }) 
    $('#basic_dialog_button').click(function(){ $('div#basic_dialog').dialog('open'); }); 
    $('div#caption_dialog').dialog({ 
     autoOpen: false, 
     buttons: { 
      "Close": function() { 
       $('div#caption_dialog').dialog("close"); 
       window.location.href = "#contact"; 
    } 
    } 
    }) 
$('#caption_dialog_button').click(function(){ $('div#caption_dialog').dialog('open'); }); 
    $('div#plus_dialog').dialog({ 
    autoOpen: false, 
    buttons: { 
     "Close": function() { 
       $('div#plus_dialog').dialog("close"); 
     window.location.href = "#contact"; 
    } 
    } 
    }) 
$('#plus_dialog_button').click(function(){ $('div#plus_dialog').dialog('open'); }); 
$('div#skills_dialog').dialog({ 
    autoOpen: false, 
    buttons: { 
    "Close": function() { 
     $('div#skills_dialog').dialog("close"); 
     window.location.href = "#contact"; 
    } 
    } 
}) 
$('#skills_dialog_button').click(function(){ $('div#skills_dialog').dialog('open'); }); 
}) 

但我敢肯定，可以以某種方式美化。他們都打開和關閉不同的盒子，所以我不知道。我知道如何做到這一點，如果他們都在做同樣的功能，但是現在將這種改變映射到我的身上是不可能的。

Answer 1

重溫過去的問題是，現在永遠這樣做之後，會是什麼現在做：

$(function(){ 
    var close = function(){ 
     $(this).dialog("close"); 
     window.location.href = "#contact";}); 

    $(".dialog").dialog({ 
     autoOpen: false, 
     buttons: { 
      "Close": close 
     }}); 

    $(".dialog-button").click(function(){ 
     var db = $(this).attr("data-val"); 
     $("#"+db).dialog('open');}); 
}); 

然後，我只是添加類.dialog到一個填寫對話元素和一個唯一的ID。對於按鈕處理程序，我將它所控制的對話框的ID添加爲數據屬性。這種方式的好處是，我甚至可以將它們設置爲變量，然後在動態創建更多對話框（如果需要）之後運行這些函數，並且它將繼續將對話框功能添加到DOM中未創建的元素上，另外我還可以如果我需要這樣做，則使用另一個js函數，該函數會將按鈕處理程序的ID附加爲數據屬性。

對我來說就像一個魅力，它就像我現在可以得到的那樣乾淨。仍在尋找能夠改善這一點的人。

Answer 2

您可以一次使用multiple selectors，用逗號分隔它們。

$('div#basic_dialog, div#caption_dialog, etc...') 

但是，對於像你這樣的情況，我想我會推薦使用類。

Answer 3

您可以指定任意數量的選擇器組合成單個結果。 你可以使用這樣的：

$(document).ready(function() { 
     $('div#basic_dialog,div#caption_dialog,div#plus_dialog,div#skills_dialog').dialog({ 
      autoOpen: false, 
      buttons: { 
       "Close": function() { 
        $('div#basic_dialog').dialog("close"); 
        window.location.href = "#contact"; 
       } 
      } 
     }) 
     $('#basic_dialog_button,#caption_dialog_button,#plus_dialog_button,#skills_dialog_button').click(function() { 
      $('div#basic_dialog').dialog('open'); 
     }); 
    }) 

編輯
給每個點擊元素通用類，可以作爲以下用途：

  $('.dialog_button').click(function() { 
       $(this).dialog('open'); 
      });