0

私は次のように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>

Jクエリ

   $(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')

});

私が作成するすべてのダイアログについて、これを行う方法がわからないので、助けていただければ幸いです!

4

3 に答える 3

0

1つのアプローチは、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');
});
于 2013-03-13T13:19:39.003 に答える
0

一意のIDの代わりにクラスを作成しないのはなぜですか？

＃faq-1、＃faq-2、........、＃faq-10の場合、それらすべてに同じクラスを割り当てます（例：faqClass）

$(".faqClass").bind('click', function(){
    $("#" + $(this).attr('id') + "a").dialog('open');
});
于 2013-03-13T13:10:51.673 に答える
0

以下の for ループを jquery で単純に記述できるかどうかを確認します。

for (var i = 1; i <= 10; i ++) {
     $("#faq-" + i).bind("click", function() {
         $("#faq-" + i + "a").dialog("open")
     });
}
于 2013-03-13T13:10:13.890 に答える