Question

我尝试做的是在<tr>事件中显示/隐藏多个OnClick。直接去代码解释会更容易。

这是生成<tr>

的PHP while循环

echo "<table class='table table-striped' style='margin-top:70px; width: 60%;'>
        <tr>
        <th>#</th>
        <th>Persona</th>
        <th>Luogo di nascita</th>
        <th>Data di Nascita</th>
        <th>Codice Fiscale</th>
        <th>Note</th>
      </tr>";
while ($row_anagrafiche=mysql_fetch_row($risultato_query_anagrafica)) {
  $query_prestazioni=mysql_query("SELECT * FROM prestazioni WHERE IDpersona='$row_anagrafiche[0]'");
  echo "<tr>
          <th><div class='showdata'>+</div></th>
          <td>" . $row_anagrafiche[1] . " " . $row_anagrafiche[2] . "</td>
          <td>" . $row_anagrafiche[3] . "</td></tr>
          ";
  while ($row_prestazioni=mysql_fetch_row($query_prestazioni)) {
    echo "<tr class='data' style='display:none;'>
            <td>ID Prest.: " . $row_prestazioni[0] . "</td>
            <td>Inizio: " . $row_prestazioni[3] . "</td>
            <td>Fine: " . $row_prestazioni[4] . "</td>
            <td>Importo: " . $row_prestazioni[5] . "€</td>
            <td>pagata: "; if ($row_prestazioni[6]==0) {
              echo "<font color='red'>No</font>";
            }else{
              echo "<font color='green'>Si</font>";
            }
            echo "</td>
            <td> " . $row_prestazioni[7] . "</td>
          </tr>

          ";
  }
  echo "</div>";
 }
echo "</table>";
}

这是<head>

中的jQuery代码

<script type="text/javascript"> 
$(document).ready(function() {
 $('.showdata').click(function() {
  $('.data').slideToggle("fast");
  });
});
</script>

现在当我点击+时，每一行都会触发事件，它会在任何地方显示内容，而不是只显示感兴趣的行。为了解决这个问题，我想像js一样通过this论证，但我不知道该怎么做。

Answer 1

基于你的JSFiddle我想想我理解你想要实现的目标。如果您查看我更新的JSFiddle，您会发现某些html元素具有data-id自定义属性。您可以使用custom data attribute分隔不同的数据集，而不是使用$(this)选择器：

<div class='showdata' data-id="1">+</div>

在我的示例中，当您单击.showdata元素时，它会查找与相同数据属性值匹配的所有行，然后调用slideToggle()方法。

所以现在如果你试图复制你的html以匹配我的JSFiddle，那么你希望自己能够追求什么。如果此数据需要是动态的，我会使用$row_anagrafiche[0]字段（或简单计数器）中的值来表示data-id属性中的值。

Answer 2

最简单的方法是使用jQuery的.nextUntil()方法：

$('.showdata').click(function() {
    $(this).closest('tr').nextUntil(":not(.data)").slideToggle("fast");
});

JSFiddle Demo

（...）给定一个表示一组DOM元素的选择器表达式，.nextUntil()方法搜索DOM树中这些元素的后继，当它到达与方法的参数匹配的元素时停止。（...）

因此，换句话说， .nextUntil(":not(.data)") 会在点击的 + 之后收集所有<tr>个元素，并在<tr>之前停止没有.data类（在下一个 + 之前）。

jQuery - 在表中使用（this）slideToggle

2 个答案: