jQueryでアイコンを変更する

Question

私は1列おきにアコーディオンが隠されたテーブルを持っています。 各行には、クリックするとアコーディオンを開閉するアイコンがあります。

アコーディオンが開かれたら、アイコンを<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