jQuery的對話，從而簡化代碼

Question

我使用jQuery的對話框如下： -

<a href="#" id="faq-1"><li><span class="black">- I paid for a journey on credit card and at a later date I got further charges. Why?</span></li></a> 

    <div id="faq-1a" class="faq-a" title="I paid for a journey on credit card and at a later date I got further charges. Why?"> 
     <p>When a booking is made via credit card we take the payment for the journey quoted. If for any reason the journey was amendments i.e. Waiting time or an extra drop off, these charges are separately billed therefore shown as a separate transaction on your statement.</p> 
    </div> 

    <a href="#" id="faq-2"><li><span class="black">- How do I get a receipt for a journey I made using my credit card?</span></li></a> 

    <div id="faq-2a" class="faq-a" title="How do I get a receipt for a journey I made using my credit card?"> 
     <p>If you are a registered user please use your online booking management via our website <a href="index.php">www.one2onecars.com</a>. you will have access to all your journeys with the option to print out receipts for each journey or as a summary statement. If you are not registered, you can email <a href="mailto:creditcardreceipts@one2onecars.com">creditcardreceipts@one2onecars.com</a> for your receipts.</p> 
    </div> 

JQUERY

$(function() { 

     $('.faq-a').dialog({ 
      modal: true, 
      resizable: false, 
      draggable: false, 
      width: '585', 
      autoOpen: false, 
      position: [370,455], 
     }); 
    }); 

}); 

    $("#faq-1").bind('click', function(){ 

     $("#faq-1a").dialog('open') 

    }); 

    $("#faq-2").bind('click', function(){ 

     $("#faq-2a").dialog('open') 

    }); 

我需要10周不同的對話框做到這一點，所以#faq-x範圍從#faq-1到#faq-10

我相信會有更簡單的方法來寫這個，所以我不必再重複：

$("#faq-3").bind('click', function(){ 

    $("#faq-3a").dialog('open') 

}); 

對於我創建的每一個對話框，我都無法弄清楚如何做到這一點，所以任何幫助都將不勝感激！

Answer 1

檢查，如果你能寫出下面的循環簡單jQuery中。

for (var i = 1; i <= 10; i ++) { 
    $("#faq-" + i).bind("click", function() { 
     $("#faq-" + i + "a").dialog("open") 
    }); 
} 

Answer 2

爲什麼不創建Class而不是唯一的ID？

您＃幫助-1，＃FAQ-2，........，＃FAQ-10分配個個同一類如faqClass

$(".faqClass").bind('click', function(){ 
    $("#" + $(this).attr('id') + "a").dialog('open'); 
}); 

Answer 3

一種方法是添加您的jQuery綁定類，並添加額外的數據屬性的錨：

小提琴這裏：http://jsfiddle.net/qV578/1/

HTML：

<a href="#" data-dialog="one" class="dialog-link">Link</a> 
<div id="one" class="dialog">Dialog fired by Link</div> 

的Javascript：

$('.dialog').dialog({ 
     modal: true, 
     resizable: false, 
     draggable: false, 
     width: '585', 
     autoOpen: false, 
     position: [370,455] 
    }); 

$('.dialog-link').bind('click',function(e) { 
    e.preventDefault(); 
    var target_dialog = $(this).attr('data-dialog'); 
    $('#'+target_dialog).dialog('open'); 
});