jquery - 通过父页面中的href从子页面加载特定ID

Question

我正在尝试做的——如果可能的话——是从子页面加载特定的 ID 并将该内容显示在父页面的对话框中。单击医疗链接时，我想加载DIV ID“医疗”。我希望将某种选择器放在可以加载正确 ID 的 href 中。

Javascript：

$(document).ready(function() {
        var $loading = $('<img src="img/loading.gif" alt="loading" class="loading">');
        $('#prod-dialog td a').each(function() {
            var $dialog = $('<div></div>')
                .append($loading.clone());
            var $link = $(this).one('click', function() {
                $dialog
                    .load($link.attr('href'))
                    .dialog({
                        title: $link.attr('title'),
                        width: 300,
                        height: 200,
                        buttons: [
                    {
                        text: "Ok",
                            click: function() {
                        $( this ).dialog( "close" );
                            }
                        },
                    {
                        text: "Cancel",
                            click: function() {
                        $( this ).dialog( "close" );
                            }
                        }
                    ]
                });
                $link.click(function() {
                    $dialog.dialog('open');
                    return false;
                });
                return false;
            });
        });
    });

父 HTML：

<table id="prod-dialog">
            <tr>
              <td><div><img src="img/medical-icon.png" width="26" height="25" />
                <p>Medical</p>
                </div></td>
              <td><a href="medical.htm"><img src="img/dialog-icon_08.png" width="24" height="23" border="0"/></a></td>
              </tr>
</table>

子页面 HTML：

<div style="display: none;" id="medical" title="Medical">
<table id="prod-content">
      <tr>
        <td><label>Coverage Level</label></td>
        <td>
            <select name="coverlevel" id="coverlevel">
                <option value="0" selected>Employee Only</option>
                <option value="1">Employee + Spouse</option>
                <option value="2">Employee + Children</option>
                <option value="3">Employee + Family</option>
            </select>
        </td>
      </tr>
      <tr>
        <td><label>Premium</label></td>
        <td><input name="premium" type="text" size="30"/></td>
      </tr>
      </table>
    </div>

Answer 1

答案如下：

$(document).ready(function() {
    var $loading = $('<img src="img/loading.gif" alt="loading" class="loading">');
    $('#prod-dialog td a').each(function() {
        var $dialog = $('<div></div>')
            .append($loading.clone());
        var $link = $(this).one('click', function() {
            var $cnt = $(this).attr('href') + " #" + $(this).attr('id')
            $dialog
                .load($cnt)
                .dialog({
                    title: $link.attr('title'),
                    width: 300,
                    height: 200,
                    buttons: [
                    {
                        text: "Ok",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    {
                    text: "Cancel",
                        click: function() {
                    $( this ).dialog( "close" );
                        }
                    }
                    ]
                });


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