javascript - ajax调用后仅在正确的选项卡中显示信息

Question

我有 jquery 选项卡。每个选项卡名称均取自数据库:

<div id="tabs">
<ul>
<?php
$hod_result = getFamilyTree();
$i = 0;
while($hod_row = mysqli_fetch_array($hod_result))
{
?>
    <li>
        <a href="#<?php echo $hod_row["staff_id"]?>" ><span class="closer" data-id3="<?php echo $hod_row["staff_id"] ?>">x</span><?php echo $hod_row["longname"].' ('.$hod_row["team_role"].')' ?></a>              
    </li>
<?php $i++;} ?>
</ul>
<?php
$hod_result_tabs = getFamilyTree();
$i_tabs = 0;
while($hod_row_tabs = mysqli_fetch_array($hod_result_tabs))
{    
?>    
  <div id="<?php echo $hod_row_tabs["staff_id"]?>">
    <!--<div class="test"></div>-->
    <div class="tree" id="<?php echo $hod_row_tabs["staff_id"]?>"> 
    <ul>
    <li>
    <?php
    $hod_id_list = $hod_row_tabs["staff_id"];
    $sv_result_list= getSupervisorRole($hod_id_list);
    ?>
    <a href="#">
        <table>
        <tr>
            <th colspan="3">Head Of The Department:</th>    
        </tr>
        <tr>
            <td>
                <a href="#" style="background-color:#808080; color:white; font-size: 8px; padding: 3px 3px 3px 3px;"><?php echo substr($hod_row_tabs["team_role"], 0, 3); ?></a>
                <span class="closer" data-id3="<?php echo $hod_row_tabs["staff_id"]; ?>">x</span>
                <?php echo $hod_row_tabs["staff_id"].' '.$hod_row_tabs["username"]; ?>
                <span class="create-user" data-id3="<?php echo $hod_row_tabs["staff_id"].'|Supervisor';?>"><img alt="" src="imagesAssessment/add.png"></span>
                <span class="btn_details" data-id3="<?php echo $hod_row_tabs["staff_id"]; ?>"> <img title="View Evaluation Details" src="imagesAssessment/details.png"></span>
            </td>            
        </tr>
        </table>
    </a>
        <ul>
        <?php
        $sv_result= getSupervisorRole($hod_id_list);
        if(mysqli_num_rows($sv_result) > 0){
            while($sv_row = mysqli_fetch_array($sv_result))
            {
        ?>
        <li>
            <a href="#" >
                <table style='all:unset;'>
                <tr>
                    <td>
                        <a href="#" style="background-color:#808080; color:white; font-size: 8px; padding: 3px 3px 3px 3px;"><?php echo strtoupper(substr($sv_row["team_role"], 0, 3)); ?></a>
                        <span class="closer" data-id3="<?php echo $sv_row["staff_id"]; ?>">x</span>
                        <a href="#" style='all:unset;' class="expand" data-id3="<?php echo $sv_row["staff_id"].'|'.$sv_row["username"].'|'.$sv_row["importance"]; ?>">
                        <?php echo $sv_row["username"]; ?> 
                        </a>
                    </td>
                </tr>                        
                <tr>
                    <td>
                        <?php echo $sv_row["staff_id"]; ?> 
                        <span class="create-user" data-id3="<?php echo $sv_row["staff_id"].'|Checker'; ?>"><img alt="" src="imagesAssessment/add.png"></span>
                        <span class="btn_details" data-id3="<?php echo $sv_row["staff_id"]; ?>"> <img title="View Evaluation Details" src="imagesAssessment/details.png"></span>
                    </td>
                </tr>
                </table>
            </a>

        </li>
        <?php }} ?>
        </ul>
    </li>
    </ul>
    </div>
    <div class="input"></div>
  </div>
<?php $i_tabs++;} ?>
</div>

最多可以有 10 个选项卡，具体取决于表中有多少用户。因此，当我想通过单击<a href="#" style='all:unset;' class="expand" data-id3="<?php echo $sv_row["staff_id"].'|'.$sv_row["username"].'|'.$sv_row["importance"]; ?>"><?php echo $sv_row["username"]; ?> </a>来扩展用户并查看更多信息时

通过单击链接我调用 ajax:

$(document).on('click', '.expand', function(){
    var view_current = $(this).data("id3");
    $.ajax({
        url: "comAssessment/hr_tree_selected.php",
        method: "POST",
        data: {view_current: view_current},
        dataType:"text",
        success: function (data) {
            $('.tree').html(data).slideDown("slow");
        }
    });
});

我想显示从ajax接收到的信息到当前选项卡。然而问题是信息显示在每个选项卡中。它只是替换每个选项卡中的信息。我该如何解决这个问题？

以下是一些图片，以便更好地理解: 有两个选项卡:

然后我单击一个名称将其展开，这就是我得到的结果。信息替换两个选项卡:

Answer 1

你可以试试这个。

$(document).on('click', '.expand', function(){
    var view_current = $(this).data("id3");
    var that = this;
    $.ajax({
      url: "comAssessment/hr_tree_selected.php",
      method: "POST",
      data: {view_current: view_current},
      dataType:"text",
      success: function (data) {
         //$('.tree').html(data).slideDown("slow");
         $(that).closest('.tree').html(data).slideDown("slow"); // use this line
     }
   });
});