Javascript 分配给可折叠div的动态id

我在一个SQL数据库中存储了一组记录，我使用PHP和HTML在页面上提取和显示这些记录。这很好，但我正在尝试创建一个可折叠的div来隐藏关于该记录的所有额外信息。当尝试此操作时，所有记录的所有div都将关闭，而不是单个记录，因此问题是如何为每个单独的div分配唯一的id（例如，命名数据库提取的每个记录名）

以下是我到目前为止的情况：

$chNumber = $record['CH_NUMBER'];?>

<div id="prof_prod" <!--style="display: none;"-->>
    <div class="groupbox showgraph">
        <div class="header">
            <div class="title-container">
                <div class="title">Part Number: <i id="partNumber"></i><?php echo $record['CH_NUMBER'] ?></div>
                <div class="title">Serial Number: <i id="serialNumber"></i><?php echo $record['SERIAL_NUMBER'] ?></div>
                <div class="title">Status: <i id="status"></i><?php echo $record['CH_NUMBER'] ?></div>
                <div class="title">Current WIP Time: <i id="wipTime"></i><?php echo $record['WIP_TIME'] ?></div>
                <div id="<?php echo $chNumber; ?>" class="button info"><i class="fa fa-info-circle fa-lg"></i></div>
            </div>
        </div>

    <div class="data-container">
        <div class="data-row">
           <div class="data-title">NC Number: </div>
        </div>
    </div>
</div>

<script> 
$(document).ready(function(){
    $("echo json_encode($chNumber)").click(function(){
        $(".data-container").slideToggle("slow");
    });
});
</script>

$chNumber=$record['chu NUMBER']；？>
您应该已经看到它是如何呈现的。代码应该是：

$(document).ready(function(){
    $("#<?php echo $chNumber; ?>").click(function () {
        $(".data-container").slideToggle("slow");
    });
});

这里的每一条记录都不需要JS

<script> 
$(document).ready(function(){
    $("div.button.info").click(function(){

        var i = $(this);

        //$('.data-container').slideUp(); //uncomment this line to close every other container

        i.closest('.groupbox.showgraph').next('.data-container').slideToggle('slow');

    });
});
</script>


$（文档）.ready（函数（）{
$（“div.button.info”）。单击（函数（）{
var i=$（本）；
//$（'.data container'）.slideUp（）；//取消对此行的注释以关闭其他所有容器
i、 最近（'.groupbox.showgraph'）。下一个（'.data container'）。滑动切换（'slow'）；
});
});

我建议在此处使用逻辑html结构：

<div class="list-container">

   <div id="i<?php echo $chNumber;?>" class="item">

      <div class="header">

       // intro text / information
       <button class="control">More</button>

      </div>

      <div class="body">
         // more content here
      </div>

   </div>

</div>


我不知道你为什么要在javascript中使用json_编码。有人告诉我要在工作中使用json_编码…对此完全陌生，请告诉我：）谢谢你的提醒：）@demonLaMagra:Praveen在他的回答中已经清楚了你如何使用它。您还需要什么谢谢您的支持@urfusion@普拉文·库马尔。对不起，如果我看起来忘恩负义，真的不是。我只是想表达我个人是如何努力学习这一点的。我感谢你们所有人的帮助：-）一夜之间，我尝试了许多不同的方法，但仍然无法实现……我想我要从头开始写这个页面，看看我是否做了任何事情。只是尝试了你的第二次代码丢失，但仍然没有成功（尽管数据显示到屏幕上的速度要快得多：）我一定是出了问题，还有一些地方我真的不知道我要做什么才能成为诚实的人Kumars post回答了这个问题，但生成了很多不必要的代码，请查看下面我的答案以获得改进。@Dennisheden Call me
Praveen
。
$(document).ready(function(){
    $("#<?php echo $chNumber; ?>").click(function () {
        $(this).closest(".groupbox.showgraph").next(".data-container").slideToggle("slow");
    });
});

<script> 
$(document).ready(function(){
    $("div.button.info").click(function(){

        var i = $(this);

        //$('.data-container').slideUp(); //uncomment this line to close every other container

        i.closest('.groupbox.showgraph').next('.data-container').slideToggle('slow');

    });
});
</script>

<div class="list-container">

   <div id="i<?php echo $chNumber;?>" class="item">

      <div class="header">

       // intro text / information
       <button class="control">More</button>

      </div>

      <div class="body">
         // more content here
      </div>

   </div>

</div>

<script> 
    $(document).ready(function(){

        var buttons = $('.list-container button.control');    

        buttons.click(function(){

             var btn = $(this);
             var item = btn.closest('.item');

             item.find('.body').slideToggle('slow');

        });    

    });
</script>