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循环。

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

Answer 2

为什么不创建类，而不是唯一的ID呢？

对于您的#faq-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');
});