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

Answer 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属性的开头使用至少一个字母。
如果该代码再次提供相同的功能，请不要重复自己和您的代码。
使用类来识别容器有助于编写全局函数来操作它们。

动态ID分配给可折叠div

2 个答案: