Php 使用AJAX将不同的ID从一个DIV解析到另一个DIV

我有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  `table` 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  `table` 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  `table` 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（）；//

这不是答案，而是一条很长的评论

我的建议是首先清理代码，使其可读，这里有一些提示

而不是

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
  }
});

照办

$('#process_toggle').load(this.firstElementChild.href);

还可以使用

while（）：？>html\u东西
$（“#项目id_parse”）。单击（函数（e）{
e、 preventDefault（）；//----在此处停止def行为。
$（'#process_toggle'）.load（this.firstElementChild.href）//
});

此外，引导代码很奇怪，

数据目标

指向自身

最后但并非最不重要的一点是，您正在循环中编写

并将ID作为目标。您可以添加

class=“project\u parse”

，并且只在循环外编写一个执行

$（'.project\u parse'）

我强烈建议你从这件事开始，然后试着找出问题所在

---

PS：此代码不受sql注入的影响，并且缺少在while语句中输出的db数据的html编码，这意味着您有多个具有相同id的div…这已经是一个问题了，那么如何解决此问题呢？警告：您完全可以使用参数化准备语句，而不是man逻辑构建您的查询。它们由或提供。永远不要信任任何类型的输入！即使您的查询仅由受信任的用户执行。如何将ID解析到下一个DIV？

<?php if (mysqli_num_rows($result_active)) : $k=0; ?>
  <?php while($row_active = mysqli_fetch_assoc($result_active)) : $k++; ?>
       
    <script>
        $("#project_id_parse").click(function(e) {
            e.preventDefault(); // -------stop the def behavior here.
            $('#process_toggle').load(this.firstElementChild.href); //
        });
    </script>

    <div id="project_id_parse" data-toggle="collapse" data-target="#project_id_parse" >
        <a href="project_list.php?id=<?= $row_active['project_id'] ?>" ><?= $row_active['project_name'] ?></a>
    </div>
    <div class="td"><?= $row_active['project_type'] ?></div>
                            
  <?php endwhile ?>
<?php endif ?>