多個對話框列表

Question

我需要編寫一個jQuery函數來讓不同的按鈕打開不同的對話框，每個對話框的鏈接都是一個對話框。

如何在html中插入一個變量來將每個按鈕鏈接到對話框，而無需爲每個按鈕編寫函數？

我有一個對話的功能，我需要這個應用到多個解決方案

$(document).ready(function() { 
    $('.prova').click(function() { 
     $('.wrap-dialog-contact') 
       .addClass('show-dialog') 
       .removeClass('hide-dialog'); 
     $('.dialog-overlay') 
       .toggleClass('dialog-overlay-on') 
       .removeClass('overoverlay-disappear') 
       .addClass('overlay-appear'); 
     $('.dialog-contact-content') 
       .addClass('dialog-enter'); 
     $('.dialog-contact-content') 
       .removeClass('dialog-exit'); 
     $('#over') 
       .addClass('blur'); 
    }); 
}); 

$(document).ready(function() { 
    $('.dialog-overlay, .input-contact-close').click(function() { 
     $('.wrap-dialog-contact') 
       .removeClass('show-dialog') 
       .addClass('hide-dialog'); 
     $('.dialog-overlay') 
       .toggleClass('dialog-overlay-on') 
       .removeClass('overoverlay-appear') 
       .addClass('overlay-disappear'); 
     $('.dialog-contact-content') 
       .removeClass('dialog-enter') 
       .addClass('dialog-exit'); 
     $('#over') 
       .removeClass('blur'); 
    }); 
}); 

我認爲，最好的辦法可能被添加data-XXX，但我怎麼能管理它在jQuery的功能？

Answer 1

使用本

<a class="prova" dialogId="dialog1">Dialog1</a> 
<a class="prova" dialogId="dialog2">Dialog2</a> 

該ID添加到您的對話框，然後（不知道#over是什麼，但你可以使用相同的邏輯）：

$('.prova').click(function(){ 

    var dialogId = $(this).attr("dialogId"); 
    $('#'+dialogId+' > .wrap-dialog-contact').addClass('show-dialog').removeClass('hide-dialog'); 
    $('#'+dialogId+' > .dialog-overlay').toggleClass('dialog-overlay-on').removeClass('overoverlay-disappear').addClass('overlay-appear');  $('#'+dialogId+' > .dialog-contact-content').addClass('dialog-enter'); 
    $('#'+dialogId+' > .dialog-contact-content').removeClass('dialog-exit'); 
    $('#over').addClass('blur'); 
    });