使用jquery在带有动态数据的while循环中创建滑动菜单答案

【问题标题】：creating slide down menus in a while loop with dynamic data using jquery使用jquery在带有动态数据的while循环中创建滑动菜单
【发布时间】：2009-09-01 21:34:51
【问题描述】：

我使用 php 显示从我的 mysql 数据库中提取的数据表。我有一个循环遍历每一行并吐出用户数据的while循环。

我想要一个更多详细信息按钮，按下该按钮后会下拉一个 div 框，显示有关用户的“更多详细信息”。我遇到的问题是当我创建 div 来保存更多细节时，我不知道如何使它对每个用户都独一无二。

当我单击更多详细信息链接时，它总是只打开最顶部的 div...因为我的 id 不是唯一的。为了使 div 独一无二，我可以向它们和 href 回显一个计数，但我不确定如何将其作为参数传递给 jquery，以便当我单击用户名旁边的更多详细信息链接时，它将显示更多详细信息特定于该用户的 div。

我一直在玩弄下面的代码，但运气不佳，感谢您的帮助。谢谢。

   <script type = "text/javascript">
    $(document).ready(function(){
        $('a.moreDetails').click(function() {
            $("#moreDetails").toggle('fast');
        });
    });
    </script>


while()
{

user info...  more details href
<div></div> to display below once more details href has been clicked.

}

【问题讨论】：

标签： javascript jquery

【解决方案1】：

怎么样：

$('a.moreDetails').click(function() {
    $(this).next().toggle('fast');
});

这将获取锚链接 (<a>) 之后的下一个元素并切换它。

那么 HTML 可能看起来像

User 1 (username) <a href="#" class="moreDetails">(details)</a>
<div class="details">More details about User 1</div>

【讨论】：

谢谢，一开始我遇到了一些麻烦，因为我在一个表中有 href，当我点击它时，div 不会出现。但是一旦我把它从桌子上拿出来，直接放在 div 上面，它就起作用了。有没有办法指定 next() 来查找 div 元素而不是表格单元格，我想这就是它正在做的事情。
您可以跳到父 div，然后获取下一个 TD 元素并切换它：$(this).parent().next().toggle('fast'); jQuery 为您提供了从一个元素导航到另一个元素的各种工具。查看docs.jquery.com/Traversing 了解更多信息。

【解决方案2】：

如果您的代码如下所示

while()
{

user info...  more details href
<a class="moreDetails" href="">blabla more details</a>
<div></div> to display below once more details href has been clicked.

}

然后你可以像这样在“moreDetails”链接之后切换 div：

$(document).ready(function(){
       $('a.moreDetails').click(function() {
            $(this).next().toggle('fast');
    });
});

【讨论】：