Javascript 从一个DIV到另一个DIV使用Ajax到PHP进行ID解析

我有4个DIV，我希望第一个DIV在单击它时打开第二个DIV，第二个DIV在单击它时打开第三个DIV，第三个DIV在单击它时打开第四个DIV。我使用collapse来实现这一点，在每次单击每个DIV时，我都使用AJAX解析下一个DIV的ID，该DIV将用于查询数据库以获取值列表

问题： 1-当我单击第一个DIV时，它不会折叠以显示下一个DIV，但如果我从第一个DIV中删除data toggle=“collapse”data target=“#project_id_parse”，并从第二个DIV中删除class=“collapse”，它将显示所有4个DIV，而不单击它

2-删除class=“collapse”和data toggle=“collapse”data target=“#project_id_parse”并单击第一个DIV以使用AJAX解析id后，它会将id解析为第二个DIV，但当我单击第二个DIV以将id解析为第三个DIV时，第二个DIV ID影响所有其他DIV，而不仅仅是解析特定DIV的ID

下面是我的代码：

<?php
    $query_active = "SELECT * FROM  `table`";
    $result_active = mysqli_query($connLocal, $query_active);
    if(mysqli_num_rows($result_active)){
        $active_numbering=0;
        while($row_active = mysqli_fetch_assoc($result_active)){
            $active_numbering++;
            $project_id     = $row_active['project_id'];
            $project_name  = $row_active['project_name'];
            $project_type = $row_active['project_type'];
        ?>
        

<script>
    
$("#project_id_parse").click(function(e) {
  e.preventDefault(); // <-------stop the def behavior here.
  var id = this.firstElementChild.href.split('=').pop(); // extract the id here
  $.ajax({
    type: "get",
    url: "project_list.php",
    data: {id:project_id}, // now pass it here
    success: function(data) {

      $('#process_toggle').html(data); //copy and paste for your special case
    }
  });
});
</script>


<div id="project_id_parse"  data-toggle="collapse" data-target="#project_id_parse" ><a href="project_list.php?id=<?=$project_id; ?>" ><?=$project_name; ?></a></div>
                    <div class="td"><?=$project_type; ?></div>
                
    <?php
        }
    }
    ?>
<!----------------------- First DIV ends -------------------------------------->

<div id="process_toggle" class="collapse">


<?php

$project_id = $_GET["project_id"];



    $query_process = " SELECT * FROM  `ghantoot_process` WHERE project_id = '".$project_id."' " ;
    $result_process = mysqli_query($connLocal, $query_process);
    if(mysqli_num_rows($result_process)){
        $NO=0;
        while($row_process = mysqli_fetch_assoc($result_process)){
            $NO++;
            $name     = $row_process['process_name'];
            $process_id     = $row_process['process_id'];
            
            
        ?>

        <script type="text/javascript">
    
$("#process_id_parse").click(function(e) {
  e.preventDefault(); // <-------stop the def behavior here.
  var id = this.firstElementChild.href.split('=').pop(); // extract the id here
  $.ajax({
    type: "get",
    url: "project_list.php",
    data: {id:id}, // now pass it here
    success: function(data) {

      $('#activities_toggle').html(data); //copy and paste for your special case
    }
  });
});
</script>

<div id="process_id_parse"><a href="project_list.php?id=<?=$process_id; ?>"><?=$name?></a></div>

    <?php
        }
    }
?>                  

<!------------------- the Second DIV ends --------------------------->


<div id="activities_toggle" class="content">

    <?php

$process_id = $_GET["id"];

    $query_activities = " SELECT * FROM  `ghantoot_activities` WHERE process_id = '".$process_id."' " ;
    $result_activities = mysqli_query($connLocal, $query_activities);
    if(mysqli_num_rows($result_activities)){
        $NO=0;
        while($row_activities = mysqli_fetch_assoc($result_activities)){
            $NO++;
            $name     = $row_activities['activities_name'];
            $activities_id     = $row_activities['activities_id'];
            
            
        ?>

<script>
    
$("#activities_id_parse").click(function(e) {
  e.preventDefault(); // <-------stop the def behavior here.
  var id = this.firstElementChild.href.split('=').pop(); // extract the id here
  $.ajax({
    type: "get",
    url: "project_list.php",
    data: {id:id}, // now pass it here
    success: function(data) {

      $('#task_toggle').html(data); //copy and paste for your special case
    }
  });
});
</script>


<div id="activities_id_parse"><a href="project_list.php?id=<?=$activities_id; ?>"><?=$name?></a>

    <?php
        }
    }
?>

<!------   Third DIVs ends -------------------->

<div id="task_toggle" class="collapse">


    <?php

$activities_id = $_GET["id"];

$query_activities = " SELECT * FROM  `ghantoot_task` WHERE activities_id = '".$activities_id."' " ;
    $result_activities = mysqli_query($connLocal, $query_activities);
    if(mysqli_num_rows($result_activities)){
        $NO=0;
        while($row_activities = mysqli_fetch_assoc($result_activities)){
            $NO++;
            $name     = $row_activities['task_name'];
            $task_id     = $row_activities['task_id'];
                
        ?>
    

<div class="td"><?=$name?></div>
                    
        <?php
        }
    }
?>

$（“#项目id_parse”）。单击（函数（e）{
e、 preventDefault（）；//
$（“#进程id_parse”）。单击（函数（e）{
e、 preventDefault（）；//
$（“#活动_id_解析”）。单击（函数（e）{
e、 preventDefault（）；//

您的JavaScript代码中存在逻辑错误：

var id = this.href.split('=').pop(); // extract the id here

在此上下文中，

this

是JQuery根据ID属性

project\u ID\u parse

选择的HTML元素的别名。因此

this

指的是

元素，而不是您预期的

元素。

this.href

将是

未定义的
，您的Ajax请求将不会触发他被激怒了

要修复此问题，请将
this.href
更改为
this.firstElementChild.href
为什么要使用
$\u GET
？要通过AJAX将ID从第一个DIV发送到第二个DIV，它不会像那样工作，AJAX是与PHP对话的Javascript，它的运行方式与PHP不同。只需将AJAX响应存储在一个变量中，然后用jsp在div中输出它。你能告诉我如何实现这个吗？
$（'#process_toggle'）.html（数据）
正在做它应该做的事情，你只需要挑选出你需要的实际数据，并在你需要的地方显示出来。你已经完成了90%的工作。请我想问一个问题，如果你能帮忙，我会很高兴的。我可以用它从一个DIV解析到另一个DIV，但当我试图用它解析到另一个DIV时，新的ID会影响其他人。@mideveloper如果您有其他与此问题无关的问题，请创建一个新问题。如果没有，请使用更多详细信息和示例代码更新您的问题。我会检查它。我只是更新了代码，如上所述有问题。@mideveloper您的问题非常复杂。它不仅包含PHP代码，还包含JS co取消Ajax事件的设置并单击事件。您不能随意删除属性，例如
类
、
数据切换
、或
数据目标
，因为这会弄乱JS/CSS代码。虽然您添加了信息，但我不理解您程序的逻辑。我发现这里的问题只与JS/CSS相关，而与JS/CSS无关与PHP相关。您应该使用浏览器的调试器来调试JS代码。您可以阅读本文