Question

嘿，我正在尝试为我的网站制作一个地址簿，我正在考虑有两个窗格。左边的那个有联系人姓名，右边的那个有联系人详细信息。

我可以使用while循环加载“联系人”窗格以循环查询，但后来我认为当用户单击特定联系人姓名时，我真的不知道如何加载该联系人的详细信息。

我怎样才能解决这个问题？

Answer 1

如果你有类似的话：

<div id="contactNamesPane">
 <ul>
    <li><a href="#" class="names" id="johnDoe">Doe, John</a></li>
 </ul>
</div>

<div id="contactDetailsPane">
</div>

$('contactNamesPane a.names').click(
   var thisContactId = $(this).attr('id');
   $('contactDetailsPane')
        .load('http://path/to/script.php?contactId=' + thisContactId + ' #' + thisContactId);
);

这假设您有一个php脚本来生成联系人详细信息（位于http://path/to/script.php，此脚本可以使用GET变量来显示特定的个人。

它还假设此数据将放在id等于联系人姓名的元素内。

我的服务器上发布了一个模糊的连贯演示：http://davidrhysthomas.co.uk/so/loadDemo.html

Answer 2

当您在左侧创建列表时，将联系人的ID添加到rel

<ul id="contacts">
    <li><a href="#" rel="ID_OF_CONTACT">Name Here</a></li>
    ...
</ul>

然后使用jquery，您可以使用rel属性并将ajax请求发送到php页面，该页面返回具有该id的联系人信息

$("#contact a").click(function() {

    var id = $(this).attr("rel");
    $.get("url_of_php_page", { id: id },
        function(data){
            // do something with the data
        }
    );

});

使用jquery.data代替

使用jQuery单击链接时加载数据

2 个答案: