Jquery：分别控制重复的类（或div）答案

【问题标题】：Jquery: controlling duplicate class's (or divs) seperatlyJquery：分别控制重复的类（或div）
【发布时间】：2018-06-30 02:17:09
【问题描述】：

我在<table> 中列出来自数据库的记录。记录数是随机的。

我希望用户能够从表格中选择特定行，然后在所选行和下一行之间出现一个空格。该空间将提供数据库中有关该特定记录的其他详细信息。

<tr class ="referal">
      <td><?php echo $referral['CustomerCode'];?></td>
      <td><?php echo $referral['PhoneNumber'];?></td>
      <td><?php echo $referral['TimeStamp'];?></td>
      <td><div id="toggle"><input type="button" value="+"/></div></td>

</tr>

<tr class="extra">
     <td>Hello, World!</td>
</tr>

Foreach的记录，我用上面的代码。你好世界！表示有问题的额外空间。

到目前为止，我已经成功使用 jQuery 的 .slideToggle() 来实现这一点，但是由于我使用的是同一个类，.extra 为每个记录额外的空间，单击其中一个记录会调用所有记录的空间显示

如果我可以确定记录的数量，那么我可以使用 PHP 为每条记录编写一个单独的类。但是，在我的情况下，我无法做到这一点。

（应该注意，这将是整体“动态”界面的一部分，该界面不断更新来自多个表的记录数）

我的问题：
我该怎么做？分别控制重复的代码实例（&类/div）。

【问题讨论】：

这不是一个 JavaScript 问题而不是一个 PHP 问题吗？
这仍然是一个 JQuery 问题。使用 .this 查找
我会编辑得更具体

标签： php jquery css html-table

【解决方案1】：

默认禁用额外信息 div：

tr.extra {
    display: none;
}

然后使用 jQuery，您可以轻松检测何时单击元素并处理它旁边的元素。

$("tr.referal").on("click", function() {
    $(this).next().slideToggle();
}

【讨论】：

轻微编辑：$(document).ready(function(){ $(".referal").click(function(){ $(this).next().slideToggle("slow" ); }); });