Question

我有一张桌子，每一行都隐藏着一个手风琴。在每一行上都有一个图标，点击该图标可打开并关闭手风琴。

手风琴一旦打开，我想将图标更改为<i class="icon-down-dir"</i>。目前，点击时所有图标都会更改，而不仅仅是单击的图标。我在定位正确的行时遇到问题。如果有人能告诉我出错的地方会很棒。谢谢。

<table class=\"data\" id=\"data_table\">
<thead>";
echo "<tr><th></th><th>Name</th> <th>Surname</th> <th>Location</th><th>Nickname</th></tr>
</thead><tbody>";

$i=0;//give unique id
while($row = mysqli_fetch_array( $result )) {
$i++;
  // Print out the contents of each row into a table
  echo "<tr id=\"row_".$i."\"><td>"; 
  echo"<i class=\"icon-right-dir\" id=\"arrow".$i."\" data-toggle=\"collapse\" data-parent=\"#accordion".$i."\" href=\"#content".$i."\"></i></td><td>";

  echo $row['firstname']; 
        echo "</td><td>"; 
  echo $row['surname'];
        echo "</td><td>"; 
  echo $row['location'];
        echo "</td><td>"; 
  echo $row['nickname'];

  echo " </td></tr>";
echo "<tr>
 <td colspan=\"12\">
<div id=\"content".$i."\" class=\"panel-collapse collapse\">
                    <div class=\"panel-body\">

<p>Content inside an accordion</p>
 </div>
 </td></tr>";
} 
echo "</tbody></table>";
}

的jQuery

$(document).ready(function(){
  $('.data').on("click",function(e){
    $(this).find('i').toggleClass('icon-right-dir icon-down-dir');
    e.preventDefault();
  });
});//End of document

Answer 1

而不是$('.data')（表格选择器）使用$('.data tr')（行选择器），如下所示： -

$(document).ready(function(){
 $('.data tr').on("click",function(e){
    $(this).find('i').toggleClass('icon-right-dir icon-down-dir');
    e.preventDefault();
 });
});//End of document

用jQuery更改图标

1 个答案: