javascript - 动态 id 分配给可折叠 div

Question

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

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