JQuery對話框 - 針對不同的ID重用代碼

我剛開始使用Jquery，我在想是否有一種方法可以重複使用多個ID對話框。我使用對話框來顯示多個項目的更深入的描述。我的代碼設置，現在的方式是：JQuery對話框 - 針對不同的ID重用代碼

  $('#NY7C').dialog({ 
       autoOpen: false, 
       width: 800, 
       height: 700, 
       modal: true, 
       draggable: false 
      }); 

      $('#NY7C-open').click(function(){ 
       $('#NY7C').dialog('open'); 
       return false; 
      }); 

      $('#NY7R').dialog({ //another dialog that has the same features as #NY7C 
      }); 

      $('#NY7R-open').click(function(){ 
      })

我用下面的代碼打開對話框身體內部：

<a id="NY7C-open" class="ui-state-default ui-corner-all" href="#">More Info</a> 
<a id="NY7R-open" class="ui-state-default ui-corner-all" href="#">More Info</a>

最後，在對話框中顯示的信息是：

<div id="#NY7C"> 
    //Information for NY7C 
</div> 
<div id="#NY7R"> 
    //Information for NY7R 
</div>

現在我有代碼的方式現在的作品。但是，我希望能夠重用第一個代碼，以便我可以將它用於多個ID（例如NY7C，NY7R，NY7P等）。有沒有辦法做到這一點？

來源

2012-07-27 D-Boy

給他們班來代替IDS。例如：

<a id="NY7C-open" class="dialog-trigger ui-state-default ui-corner-all" href="#">More Info</a> 
<a id="NY7R-open" class="dialog-trigger ui-state-default ui-corner-all" href="#">More Info</a> 

<div id="#NY7C" class="my-dialog"> 
    //Information for NY7C 
</div> 
<div id="#NY7R" class="my-dialog"> 
    //Information for NY7R 
</div>

而且JS是：

$('.my-dialog').dialog({ 
    autoOpen: false, 
    width: 800, 
    height: 700, 
    modal: true, 
    draggable: false 
}); 
$('.dialog-trigger').click(function(){ 
    var id = this.id; 
    var targetId = id.replace('-open',''); 
    var $target = $('#' + targetId); 
    if($target.length){ 
     $target.dialog('open'); 
     return false; 
    } 
});

來源

2012-07-27 16:10:28 lbstr

這完美地工作！謝謝。 – 2012-07-27 16:44:01

您可以添加類相似對話框

<div id="#NY7C" class="dialog"> 
    //Information for NY7C 
</div> 
<div id="#NY7R" class="dialog"> 
    //Information for NY7R 
</div>

然後做

$('.dialog').dialog({});

來源

2012-07-27 16:08:03

這個怎麼樣？

function attachDialog(elementId) { 
    $(elementId).dialog({ 
     autoOpen: false, 
     width: 800, 
     height: 700, 
     modal: true, 
     draggable: false 
    }); 

    $(elementId + 'open').click(function() { 
     $(elementId).dialog('open'); 
     return false; 
    }); 

} 

attachDialog('#NY7C'); 
attachDialog('#NY7R');

來源

2012-07-27 16:10:11

JQuery對話框 - 針對不同的ID重用代碼

回答

相關問題