动态 id 分配给可折叠 div答案

【问题标题】：Dynamic id assign to collapsible div动态 id 分配给可折叠 div
【发布时间】：2016-01-05 19:58:31
【问题描述】：

我有一组存储在 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>

现在我知道这里可能存在一般的 HTML 错误，但那是因为我复制了代码并取出了一些东西（抱歉）。我的问题是围绕这一行：

<div id="<?php echo $chNumber; ?>" class="button info"><i class="fa fa-info-circle fa-lg"></i></div>

还有：

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

【问题讨论】：

我不确定你为什么在 javascript 中回显 json_encode。
有人告诉我在工作...完全陌生，所以请与我裸露 :) 谢谢你的提醒 :)
@demonLaMagra ：Praveen 已经在他的回答中明确了如何使用它。你还需要什么
感谢您的支持@urfusion！
@Praveen Kumar。对不起，如果我似乎忘恩负义，真的不是。我只是在表达我个人在学习这一点时遇到的困难。感谢大家提供的所有帮助 :-) 整晚我尝试了很多不同的东西，但仍然无法让它工作......我想我要从头开始写页面，看看它是否有什么用我已经完成了。

标签： javascript php html

【解决方案1】：

您应该已经看到了它的渲染方式。代码应该是：

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

我不明白这里json_encode 的用法。但是您肯定缺少<?php ?> 标签。

另外，请尝试使用this 而不是'.data-container'，它会选择所有内容。因此，您可能正在使用：

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

【讨论】：

刚刚尝试了第二次丢失的代码，但仍然没有运气（尽管数据显示在屏幕上的速度要快得多 :) 我真的一定是在其他地方出错了，真的不知道我在做什么老实说
Kumas 的帖子回答了这个问题，但生成了很多不必要的代码，请查看我下面的答案以进行改进。
@DennisHeiden 给我打电话Praveen。

【解决方案2】：

这里的每条记录都不需要 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>

我建议在这里使用逻辑 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>

jQuery:

<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>

如果动态添加数字，请在元素的 id 属性开头至少使用一个字母。
如果代码再次提供相同的功能，请不要重复您自己和您的代码。
使用类来识别容器有助于编写全局函数来操作它们。

【讨论】：