JQueryUI 将动态选择器传递给对话框

Question

好的，当用户单击与记录相关的“添加”时，“添加”应该获取并使用与该记录相关的 DIV ID。我非常接近让它工作，但我只需要动态传递选择器。

那么你将如何动态地传递你的选择器呢？

<tr>
    <td>1/1/0001</td>
    <td>SOME FName</td>
    <td>SOME LNAME</td>
    <td>SKIN TW</td>
    <td>SOMEID</td>
    <td>1/7/2009</td><td>Graph Trend View <a href="#" id="dialog_3333333" class="ui-state-default ui-corner-all">Add</a></td>
    <td class="hide-cell">
    <!-- ui-dialog -->
   <div id="dialog_3333333_message" title="3333333 THOMAS LNAME">
    <p>3333333 THOMAS LNAME, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
   </div>            
    </td>
</tr>

    <tr>
        <td>6/21/2010</td>
        <td>EMERY</td>
        <td>LNAMED</td>
        <td>RAND E</td>
        <td>77777777777</td>
        <td>1/7/2009</td><td>Graph Trend View <a href="#" id="dialog_77777777777" class="ui-state-default ui-corner-all">Add</a></td>
        <td class="hide-cell">
        <!-- ui-dialog -->
       <div id="dialog_77777777777_message" title="77777777777 EMERY RANDOLPH">
        <p>77777777777 EMERY LNAME, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
       </div>            
        </td>
    </tr>

我已经非常接近解决方案，但无法克服这个障碍？

    $(function() {

      // Dialog
      **// This is where the dynamic selector needs to be passed in**
    $('#dialog_33333333_message').dialog({
        autoOpen: false,
        resizable: false,
        height: 260,
        modal: true,
        width: 240,
        buttons: {
          "Compare Carriers": function() {
            $(this).dialog("close");
          },
          "Save": function() {
            $(this).dialog("close");
          }
        }
      });

      // Dialog Link
      $('.ui-state-default').click(function() {

   var target = $(this).attr("id");   

      alert(target);

   $('#' + target + '_message').dialog('open');
        return false;
      });

      //hover states on the static widgets
      $('.ui-state-default').hover(
         function() { $(this).addClass('ui-state-hover'); },
         function() { $(this).removeClass('ui-state-hover'); }
        );
    });

这就是我所说的“我有多接近”的意思。 http://tinypic.com/r/2hs2o0i/7 转到图片，我要新发布图片

Answer 1

您可以使用反映 div 对话框模式的选择器($('div[id^="dialog_").dialog()) 并按如下方式使用它：

$(function () { 
    $('div[id^="dialog_").dialog({
        autoOpen: false,
        resizable: false,
        height: 260,
        modal: true,
        width: 240,
        buttons: {
            "Compare Carriers": function () {
                $(this).dialog("close");
            },
            "Save": function () {
                $(this).dialog("close");
            }
        }
    }); // Dialog Link      
    $('.ui-state-default').click(function () {
        var target = $(this).attr("id");
        alert(target);
        $('#' + target + '_message').dialog('open');
        return false;
    });
    //hover states on the static widgets    
    $('.ui-state-default').hover(function () {
        $(this).addClass('ui-state-hover');
    }, function () {
        $(this).removeClass('ui-state-hover');
    });
});